MARQUEE HTML5 ja CSS3 ajastul

click fraud protection

Need teist, kes on HTML-i pikka aega kirjutanud, võivad selle elemendi meelde jätta. See oli brauserispetsiifiline element, mis lõi kogu ekraanil teksti kerimise riba. Seda elementi ei lisatud üksusele kunagi HTML selle spetsifikatsioon ja tugi olid brauserites väga erinevad. Inimestel oli selle elemendi kasutamise kohta sageli väga tugev arvamus - nii positiivne kui ka negatiivne. Kuid hoolimata sellest, kas sa armastasid seda või vihkasid seda, teenis see siiski kasti piire ületava sisu nähtavaks tegemist.

Osa tugevast isiklikust arvamusest peale oli brauserite poolt täielikult rakendamata seda peetakse visuaalseks efektiks ja sellisena ei tohiks seda defineerida HTML-iga, mis määratleb struktuur. Selle asemel peaks visuaalseid või esitlusefekte haldama CSS. Ja CSS3 lisab telkmooduli, et kontrollida, kuidas brauserid seda lisavad telgi efekt elementidele.

Uued CSS3 atribuudid

CSS3 lisab viis uued omadused et aidata kontrollida, kuidas teie sisu telgis kuvatakse: ülevoolustiil, telkstiil, telkide mängimise arv, telkide suund ja telkide kiirus.

instagram viewer

ülevoolu stiilis
Ülevoolustiilis atribuut (mida käsitlesime ka artiklis CSS ületäitumine) määratleb sisukasti ülevoolava sisu eelistatud stiili. Kui määrate väärtuseks telk-rida või telkplokk, libiseb teie sisu sisse ja välja vasakule / paremale (telk-rida) või üles / alla (telk-plokk).

telk-stiilis
See omadus määrab, kuidas sisu kuvasse (ja välja) liigub. Valikud on kerige, libistage ja vaheldumisi. Kerimine algab sellest, et sisu on ekraanilt täielikult välja lülitatud, ja seejärel liigub see nähtaval alal, kuni see kõik on uuesti ekraanilt väljas. Slaid algab sellest, et sisu on ekraanilt täielikult välja lülitatud, seejärel liigub see üle, kuni sisu on ekraanile täielikult liikunud ja ekraanil pole enam sisu, mida libiseda. Lõpuks põrgatab alternatiivne sisu küljelt küljele, libistades edasi-tagasi.

telk-mäng-loendus
MARQUEE elemendi kasutamise üks puudusi on see, et telk ei peatu kunagi. Kuid stiili omaduste telkide ja mängude loendamise abil saate telgi seada sisu sisse ja välja lülitama teatud arvu kordi.

telk-suund
Samuti saate valida suuna, mida sisu peaks ekraanil kerima. Väärtused edasi ja tagasi põhinevad teksti suunal, kui ülevoolustiil on telgjooneline, ja üles või alla, kui ülevoolustiil on telkplokk.

Markiisi suuna üksikasjad

ülevoolu stiilis Keele suund edasi tagurpidi
telk-rida ltr vasakule eks
rtl eks vasakule
telkplokk üles alla

telk-kiirus
See omadus määrab, kui kiiresti sisu ekraanil kerib. Väärtused on aeglased, normaalsed ja kiired. Tegelik kiirus sõltub sisust ja seda kuvavast brauserist, kuid väärtused peavad olema aeglased, aeglasemad kui tavaliselt, mis on aeglasemad kui kiiresti.

Telkimisomaduste brauseritugi

Võib-olla peate kasutama müüja eesliited et CSS-i telkimiselemendid töötaksid. Need on järgmised:

CSS3 Pakkuja prefiks
overflow-x: telkjoon; ülevool-x: -webkit-telk;
telk-stiilis -veebikomplekt-telk-stiil
telk-mäng-loendus -veebikett-telk-kordus
telgi suund: edasi | tagasi; -webkit-telk-suund: edasi | tagasi;
telk-kiirus -veebikomplekt-telk-kiirus
pole samaväärset -veebikomplekti-telgi juurdekasv

Viimane omadus võimaldab teil määratleda, kui suured või väikesed sammud peaksid olema, kui sisu telgis ekraanil kerib.

Oma telgi töötamiseks peate kõigepealt asetama müüja eesliidetud väärtused ja seejärel järgima neid CSS3 spetsifikatsiooni väärtustega. Näiteks on siin telgi CSS, mis kerib 200x50 kasti sees viis korda vasakult paremale teksti.

{
laius: 200px; kõrgus: 50px; tühik: nowrap;
ülevool: varjatud;
ülevool-x: -webkit-telk;
-webkit-telk-suund: edasi;
-webkit-marquee-stiil: kerimine;
-veebikomplekti-telgi kiirus: normaalne;
-veebikomplekti-telgi juurdekasv: väike;
-veebikomplekt-telk-kordus: 5;
overflow-x: telkjoon;
telk-suund: edasi;
telkstiil: kerimine;
telgi kiirus: normaalne;
telk-mäng-loend: 5;
}
instagram story viewer