Tie, kurie ilgai rašėte HTML, gali prisiminti elementą. Tai buvo konkrečios naršyklės elementas, sukūręs ekrano slinkimo teksto juostą. Šis elementas niekada nebuvo pridėtas prie HTML jo specifikacijos ir palaikymas naršyklėse labai skyrėsi. Žmonės dažnai turėjo labai tvirtą nuomonę apie šio elemento naudojimą - tiek teigiamą, tiek neigiamą. Nesvarbu, ar mylėjote, ar nekenčiate, tai padarė tikslą padaryti langelį ribas peržengiantį turinį matomą.
Iš dalies dėl to, kad naršyklės niekada nebuvo visiškai įgyvendintos, išskyrus tvirtą asmeninę nuomonę, tai buvo jis laikomas vizualiniu efektu ir todėl jo neturėtų apibrėžti HTML, apibrėžiantis struktūra. Vietoj to, vizualinius ar pateikimo efektus turėtų valdyti CSS. CSS3 prideda palėpės modulį, kad valdytų, kaip naršyklės prideda palapinės efektas prie elementų.
Naujos CSS3 ypatybės
CSS3 prideda penkis naujų savybių padėti kontroliuoti, kaip jūsų turinys rodomas palapinėje: perpildymo, palėpės stiliaus, palapinių-žaidimų skaičiavimo, palapinių krypties ir palėpių greičio.
perpildymo stiliaus
Perpildymo stiliaus ypatybė (kurią mes taip pat aptarėme straipsnyje CSS perpildymas) apibrėžia pageidaujamą turinio, perpildančio turinio laukelį, stilių. Jei nustatysite reikšmę „palėpės linija“ arba „palėpės blokavimas“, jūsų turinys slinks į kairę / dešinę (palėpės linija) arba aukštyn / žemyn (palėpės blokelis).
palapinės stiliaus
Ši nuosavybė apibrėžia, kaip turinys bus perkeltas į rodinį (ir iš jo). Variantai yra slinkti, slinkite ir keiskite. Slinkimas prasideda nuo turinio visiškai ne ekrane, tada jis juda per matomą sritį, kol visa vėl bus visiškai ne ekrane. Pristatymas prasideda nuo turinio visiškai ne ekrane, tada jis juda skersai tol, kol turinys visiškai persikelia į ekraną ir ekrane nebelieka daugiau slydimo. Galiausiai, pakaitinis atšoka turinį iš vienos pusės į kitą, slinkdamas pirmyn ir atgal.
palapinių-žaidimų skaičiavimas
Vienas iš MARQUEE elemento naudojimo trūkumų yra tai, kad palapinė niekada nesustoja. Bet naudodamiesi stiliaus nuosavybės palapinių ir grojimų skaičiumi, galite nustatyti, kad palapinė suktų turinį tam tikrą skaičių kartų.
palapinės kryptis
Taip pat galite pasirinkti kryptį, kuria turinys turėtų slinkti ekrane. Vertės pirmyn ir atgal yra pagrįstos teksto kryptingumu, kai perpildymo stilius yra palėpės linija, o aukštyn arba žemyn, kai perpildymo stilius yra palėpės blokas.
„Marquee-Direction“ informacija
perpildymo stiliaus |
Kalbos kryptis | Persiųsti | atvirkščiai |
|---|---|---|---|
palapinių linija |
ltr | paliko | teisingai |
| rtl | teisingai | paliko | |
palapinė-blokas |
aukštyn | žemyn |
palapinės greitis
Ši ypatybė nustato, kaip greitai turinys slenka ekrane. Vertės yra lėtos, normalios ir greitos. Tikrasis greitis priklauso nuo turinio ir jį rodančios naršyklės, tačiau reikšmės turi būti lėtos, lėčiau nei įprastai, lėčiau nei greitai.
Naršyklės savybių palaikymas
Gali tekti naudoti pardavėjo priešdėliai kad CSS palapinės elementai veiktų. Jie yra tokie:
| CSS3 | Tiekėjo priešdėlis |
|---|---|
overflow-x: palėpės linija; |
overflow-x: -webkit-marquee; |
palapinės stiliaus |
-webkit-marquee stiliaus |
palapinių-žaidimų skaičiavimas |
-webkit-marquee-repetition |
palapinės kryptis: pirmyn | atgal; |
-webkit-marquee-direction: pirmyn | atgal; |
palapinės greitis |
-webkit-palapinės greitis |
| nėra atitikmens | -webkit-palapinės prieaugis |
Paskutinė ypatybė leidžia nustatyti, kokie dideli ar maži žingsniai turėtų būti, kai turinys slenka palėpės ekrane.
Norėdami, kad palėpė veiktų, pirmiausia turėtumėte įdėti tiekėjo prefiksų reikšmes ir sekti jas su CSS3 specifikacijos vertėmis. Pavyzdžiui, čia yra palapinės CSS, kuri penkis kartus slenka tekstą iš kairės į dešinę 200x50 laukelio viduje.
{
plotis: 200 taškų; aukštis: 50 taškų; white-space: nowrap;
perteklius paslėptas;
overflow-x: -webkit-marquee;
-webkit-marquee-direction: pirmyn;
-webkit-marquee-style: slinkti;
-webkit-marquee-speed: normalus;
-webkit-palapinės prieaugis: mažas;
-webkit-marquee-repetition: 5;
overflow-x: palėpės linija;
palapinės kryptis: pirmyn;
palapinės stilius: slinkite;
palapinės greitis: normalus;
palapinių-žaidimų skaičius: 5;
}