MARQUEE dalam Zaman HTML5 dan CSS3

Mereka yang telah menulis HTML untuk sekian lama boleh mengingati elemen tersebut. Ini adalah elemen khusus penyemak imbas yang mencipta spanduk teks menatal merentasi skrin. Unsur ini tidak pernah ditambahkan pada spesifikasi HTML dan sokongan untuknya berbeza-beza di seluruh pelayar. Orang sering mempunyai pendapat yang sangat kuat mengenai penggunaan elemen ini - baik positif dan negatif. Tetapi sama ada anda suka atau membencinya, ia berfungsi sebagai tujuan membuat kandungan yang melimpah pada sempadan kotak yang dapat dilihat.

Sebahagian daripada sebab itu tidak pernah dilaksanakan sepenuhnya oleh pelayar, selain daripada pendapat peribadi yang kuat, adalah dianggap sebagai kesan visual dan oleh itu, ia tidak sepatutnya ditakrifkan oleh HTML, yang mentakrifkan strukturnya. Sebaliknya, kesan visual atau persembahan harus diuruskan oleh CSS. Dan CSS3 menambah modul marquee untuk mengawal bagaimana penyemak imbas menambah kesan marquee kepada elemen.

Hartanah CSS3 Baru

CSS3 menambah lima sifat baru untuk membantu mengawal bagaimana kandungan anda dipaparkan dalam tenda: gaya limpahan, gaya marquee, kiraan marquee-play-count, arah tingkap dan kelajuan marquee.

gaya limpahanThe gaya limpahan harta (yang saya juga dibincangkan dalam artikel Overflow CSS) mentakrif gaya pilihan untuk kandungan yang melimpah kotak kandungan. Jika anda menetapkan nilai kepada talian marquee atau blok marquee kandungan anda akan meluncur masuk dan keluar ke kiri / kanan (talian marquee) atau naik / turun (blok marquee).

gaya marqueeHarta ini mentakrifkan bagaimana kandungan akan dipapar (dan keluar).

Pilihannya adalah tatal, gelongsor dan alternatif. Tatal bermula dengan kandungan sepenuhnya dari skrin, dan kemudian bergerak ke seluruh kawasan yang kelihatan sehingga semua skrin mati sepenuhnya. Slide bermula dengan kandungan sepenuhnya dari skrin dan kemudian bergerak sehingga kandungan telah sepenuhnya bergerak ke skrin dan tidak ada lagi kandungan yang tersisa untuk slaid pada skrin.

Akhir sekali, selebihnya memantul kandungan dari sisi ke sisi, meluncur ke belakang dan sebagainya.

kiraan marquee-play-countSalah satu kelemahan menggunakan MARQUEE unsur adalah bahawa tenda tidak pernah berhenti. Tetapi dengan harta gaya kiraan marquee-play-count anda boleh menetapkan marquee untuk memutar dan mematikan kandungan untuk beberapa kali tertentu.

arah tingkapAnda juga boleh memilih arah yang kandungannya harus tatal pada skrin. Nilai-nilai ke hadapan dan sebaliknya adalah berdasarkan arah arahan teks apabila gaya limpahan adalah talian marquee dan naik atau turun apabila gaya limpahan adalah blok marquee.

Butiran Marquee-Direction

gaya limpahan	Arah Bahasa	ke hadapan	sebaliknya
talian marquee	ltr	ditinggalkan	betul
	rtl	betul	ditinggalkan
blok marquee		up	turun

kelajuan marqueeHarta ini menentukan betapa cepatnya kandungan skrol pada skrin. Nilai-nilai tersebut adalah lambat, normal, dan cepat. Kelajuan sebenarnya bergantung kepada kandungan dan penyemak imbas memaparkannya, tetapi nilai-nilai itu mestilah lambat adalah lebih perlahan daripada normal yang lebih perlahan daripada cepat.

Sokongan Penyemak Imbas bagi Marquee Properties

Anda mungkin perlu menggunakan awalan vendor untuk mendapatkan elemen marquee CSS untuk berfungsi. Mereka adalah seperti berikut:

CSS3	Awalan Penjual
overflow-x: marquee-line;	overflow-x: -webkit-marquee;
gaya marquee	-webkit-marquee-style
kiraan marquee-play-count	-webkit-marquee-repetition
arah-tuju: arah depan | terbalik;	-webkit-marquee-direction: forward | backwards;
kelajuan marquee	-webkit-marquee-speed
tidak bersamaan	-webkit-marquee-increment

Harta terakhir membolehkan anda menentukan berapa besar atau kecil langkah-langkahnya sebagai skrol kandungan pada skrin dalam tenda.

Untuk mendapatkan pekerjaan marquee anda, anda perlu meletakkan nilai prefixed vendor terlebih dahulu dan kemudian ikutinya dengan nilai spesifikasi CSS3. Sebagai contoh, di sini adalah CSS untuk tenda yang menatal teks lima kali dari kiri ke kanan dalam kotak 200x50.

{ lebar: 200px; ketinggian: 50px; ruang putih: sekarang; melimpah: tersembunyi; overflow-x: -webkit-marquee; -webkit-marquee-direction: ke hadapan; -webkit-marquee-style: skrol; -webkit-marquee-speed: normal; -webkit-marquee-increment: small; -webkit-marquee-repetition: 5; overflow-x: marquee-line; arah tenda: ke hadapan; gaya tamadun: tatal; kelajuan marquee: normal; perkeranian bermain marquee: 5;}