Tie iš jūsų, kurie ilgą laiką rašo HTML , gali prisiminti elementą. Tai buvo konkretaus naršyklės elementas, kuris sukūrė ekrano slinkties tekstą. Šis elementas niekada nebuvo pridėtas prie HTML specifikacijos, o jo palaikymas labai skiriasi visose naršyklėse. Žmonės dažnai turėjo labai stiprią nuomonę apie šio elemento naudojimą - teigiamą ir neigiamą. Bet ar jūs jį mylėtumėte ar nekentėjote, jis buvo skirtas tam, kad turinys, kuris perpildytų langelius, būtų matomas.
Iš dalies dėl to, kad naršyklės niekada nebuvo visiškai įdiegtos, tvirta asmeninė nuomonė buvo ta, kad jis laikomas vizualiu efektu, todėl jis neturėtų būti apibrėžtas HTML, kuris apibrėžia struktūrą. Vietoj to vaizdo ar pristatymo poveikį turėtų valdyti CSS. O CSS3 prideda "marquee" modulį, skirtą kontroliuoti, kaip naršyklės elementus papildo "marquee" efektu .
Naujos CSS3 ypatybės
CSS3 prideda penkias naujas savybes , padedančias valdyti, kaip jūsų turinys rodomas "marquee": perpildymo stilius, "marquee" stilius, "marquee-play-count", "marquee-direction" ir "marquee-speed".
perpildymo stilius
Perpildymo stiliaus nuosavybė (apie kurią taip pat aptariau straipsnyje CSS Overflow) apibrėžia pageidaujamą turinio, kuris perpildo turinį, stilius. Jei nustatysite reikšmę "marquee-line" arba "marquee-block", jūsų turinys skaidrės į ir į kairę / į dešinę (marquee-line) arba aukštyn / žemyn (marquee-block).
marquee stiliaus
Šis turinys apibrėžia, kaip turinys pereis į vaizdą (ir iš jo).
Galimybės yra slinkti, skaidrėti ir pakeisti. Slinkimas prasideda nuo turinio visiškai išjungto ekrano, o tada jis juda visoje matomoje srityje, kol vėl visiškai išjungiamas ekranas. Skaidrė prasideda nuo turinio visiškai išjungto ekrano, tada jis juda, kol turinys visiškai persikelia į ekraną, o ekrane nejudama daugiau turinio.
Galiausiai pakaitinis naršymas sugrąžina turinį iš vienos pusės į kitą, stumdamas pirmyn ir atgal.
marquee-play-count
Vienas iš MARQUEE elemento naudojimo trūkumų yra tai, kad sėdynė niekada nesustoja. Tačiau su stiliaus nuosavybės "marquee-play-count" funkcija galite nustatyti marquee, norėdami pasukti turinį į ir išjungti tam tikrą skaičių kartų.
kryžkelės kryptis
Taip pat galite pasirinkti kryptį, kurią turinys turėtų slinkti ekrane. Vertės į priekį ir atgal yra pagrįstos teksto kryptimi, kai perpildymo stilius yra "marquee-line" ir aukštyn arba žemyn, kai perpildymo stilius yra "marquee-block".
Marquee-Direction Detalės
| perpildymo stilius | Kalbos kryptis | Persiųsti | atvirkštinis |
|---|---|---|---|
| marquee-line | ltr | kairėje | teisus |
| rtl | teisus | kairėje | |
| marquee-block | aukštyn | žemyn |
marquee-speed
Šis turinys nustato, kaip greitai ekrane rodomas turinys. Vertės yra lėtos, normalios ir greitos. Tikrasis greitis priklauso nuo turinio ir naršyklės rodymo, bet vertes turi būti lėtas lėtesnis nei įprastas, kuris yra lėtesnis nei greitas.
"Marquee" savybių naršyklės palaikymas
Tam, kad CSS marquee elementai veiktų, gali prireikti naudoti gamintojų prefiksus . Jie yra tokie:
| CSS3 | Tiekėjo prefiksas |
|---|---|
| perpildymas-x: marquee-line; | overflow-x: -webkit-marquee; |
| marquee stiliaus | -webkit-marquee-stilius |
| marquee-play-count | -webkit-marquee-repetition |
| padėklo kryptis: pirmyn | atbulinė; | -webkit-marquee-direction: forwards | backwards; |
| marquee-speed | -webkit-marquee-speed |
| nėra lygiaverčio | -webkit-marquee-prieaugis |
Paskutinis turtas leidžia apibrėžti, kiek žingsniai turėtų būti dideli ar mažesni, nes turinys slinkia ekrane rodyklėje.
Kad jūsų tvartas veiktų, pirmiausia turėtumėte pateikti tiekėjo išankstines reikšmes ir sekti jas CSS3 specifikacijos vertes. Pavyzdžiui, čia yra "CSS", skirta marškiniui, kuris penkis kartus perkelia tekstą iš kairės į dešinę į 200x50 langelį.
{
plotis: 200px; aukštis: 50 px; baltoji erdvė: nowrap;
perteklius paslėptas;
overflow-x: -webkit-marquee;
-webkit-marquee-direction: forwards;
-webkit-marquee-style: scroll;
-webkit-marquee-speed: normalus;
-webkit-marquee-increment: mažas;
-webkit-marquee-repetition: 5;
perpildymas-x: marquee-line;
padėklo kryptis: į priekį;
marquee-style: scroll;
padangos greitis: normalus;
marquee-play-count: 5;
}