Rumah > Artikel > hujung hadapan web > Cara menggunakan teg marquee dalam html5
Cara menggunakan teg marquee dalam html5
- 青灯夜游asal
- 2022-08-25 17:51:202337semak imbas
Dalam HTML5, teg marquee digunakan untuk membuat teks atau imej menatal, sintaks "
teks atau imej)" ia membenarkan kandungan yang terkandung dalam pasangan teg itu Tatal ke bawah secara mendatar atau menegak pada halaman web Dengan menetapkan sifat, anda boleh mengawal perkara yang berlaku apabila teks mencapai tepi bekas Sebagai contoh, sifat kelakuan boleh mengawal kaedah menatal (menatal kitaran, menatal sekali sahaja dan kemudian berhenti. , dan bergantian menatal ke depan dan ke belakang).
Persekitaran pengendalian tutorial ini: sistem Windows 7, versi HTML5, komputer Dell G3.
Dalam HTML, marquee bermaksud "menatal". Elemen marquee (
teg
Teg ini digunakan untuk membuat teks atau imej menatal ke bawah secara mendatar atau menegak pada halaman web. Anda boleh menggunakan sifatnya untuk mengawal perkara yang berlaku apabila teks sampai ke tepi bekas.
label teks tatal marquee
Akan terdapat banyak elemen multimedia dalam halaman, seperti teks dinamik, imej dinamik, audio dan video, dsb., dan yang paling mudah satu ialah teks Tatal setinggi langit Dalam HTML, jika kita ingin menambah teks tatal, kita perlu menggunakan tag marquee.
Mari kita lihat contoh paling mudah dahulu:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>marquee</title>
</head>
<body style="background: black;padding: 20px;">
<marquee><span style="font-weight: bolder;font-size: 40px;color: white;">Welcom PHPCN!</span></marquee>
</body>
</html>Untuk menjadikan kesan paparan lebih jelas, di sini latar belakang halaman ditetapkan kepada hitam dan teks tatal ditetapkan kepada putih. Kesan paparan adalah seperti yang ditunjukkan dalam rajah :
Dengan cara ini, kami telah melaksanakan teks tatal yang paling mudah. Terdapat juga beberapa atribut dalam teks tatal untuk dikawal arah menatal, kelajuan menatal, dll. Mari lakukan perkara ini di bawah Mari kita lihat beberapa atribut yang lebih biasa digunakan.
atribut arah menatal arah
Secara lalai, teks menatal dari kanan ke kiri Dalam aplikasi sebenar, kita mungkin perlu menukar arah, supaya kita boleh menetapkannya melalui nilai yang tersedia untuk atribut ini ialah: up, down, left, right, masing-masing menunjukkan tatal ke atas, bawah, kiri dan kanan.
Contohnya adalah seperti berikut:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>marquee</title>
<style>
body {
background: black;
padding: 20px;
}
marquee {
font-weight: bolder;
font-size: 40px;
color: white;
}
</style>
</head>
<body>
<marquee direction="up">UP</marquee>
<marquee direction="down">DOWN</marquee>
<marquee direction="left">LEFT</marquee>
<marquee direction="right">RIGHT</marquee>
</body>
</html>
atribut kaedah menatal tingkah laku
Melalui tingkah laku, anda boleh menetapkan kaedah menatal, seperti gerak balas menunggu. Nilai yang tersedia untuk tingkah laku ialah: scroll, slide, alternate, yang masing-masing mewakili tatal bulat, menatal sekali dan kemudian berhenti, dan menatal silih berganti.
Contohnya adalah seperti berikut:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>marquee</title>
<style>
body {
background: black;
padding: 20px;
}
marquee {
font-weight: bolder;
font-size: 40px;
color: white;
}
</style>
</head>
<body>
<marquee behavior="scroll">scroll</marquee>
<marquee behavior="slide">slide</marquee>
<marquee behavior="alternate">alternate</marquee>
</body>
</html>
atribut kelewatan tatal tunda tatal dan atribut kelajuan tatal jumlah tatal
boleh ditetapkan melalui atribut tunda tatal Selang masa antara tatal teks. Unit selang masa penangguhan tatal ialah milisaat selang masa ini ditetapkan sebagai selang masa antara dua langkah tatal Jika masa terlalu lama, kesan berhenti-dan-pergi.
jumlah tatal digunakan untuk menetapkan saiz langkah tatal.
Contohnya adalah seperti berikut:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>marquee</title>
<style>
body {
background: black;
padding: 20px;
}
marquee {
font-weight: bolder;
font-size: 40px;
color: white;
}
</style>
</head>
<body>
<marquee scrolldelay="800" scrollamount="100">Welcom PHPCN!</marquee>
</body>
</html>
atribut gelung tatal gelung
Jika kita mahu teks berhenti selepas menatal beberapa kali, Anda boleh menggunakan atribut gelung.
Contohnya adalah seperti berikut:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>marquee</title>
<style>
body {
background: black;
padding: 20px;
}
marquee {
font-weight: bolder;
font-size: 40px;
color: white;
}
</style>
</head>
<body>
<marquee loop="2">Welcom CSDN!</marquee>
</body>
</html>
(Mempelajari perkongsian video: Bermula dengan bahagian hadapan web)
Atas ialah kandungan terperinci Cara menggunakan teg marquee dalam html5. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!