Diegene van julle wat lankal HTML geskryf het, kan die element onthou. Dit was 'n blaaierspesifieke element wat 'n vaandel van blaaiende teks oor die skerm geskep het. Hierdie element is nooit by die HTML-spesifikasie gevoeg nie en ondersteuning daarvoor het wyd oor blaaiers gewissel. Mense het dikwels baie sterk menings oor die gebruik van hierdie element gehad - positief en negatief. Maar of jy dit liefgehad het of gehaat het, het dit die doel gedien om inhoud te maak wat oor die boksgrense sigbaar was.
Deel van die rede dat dit nooit ten volle deur blaaiers geïmplementeer is nie, behalwe sterk persoonlike opinie, was dat dit as 'n visuele effek beskou word en as sodanig moet dit nie gedefinieer word deur die HTML wat die struktuur definieer nie. In plaas daarvan, visuele of aanbieding effekte moet bestuur word deur CSS. En CSS3 voeg die marquee module toe om te bepaal hoe blaaiers die marquee-effek by elemente voeg.
Nuwe CSS3-eienskappe
CSS3 voeg vyf nuwe eienskappe by om te help beheer hoe jou inhoud in die tentoonstelling vertoon word: oorloopstyl-, marquee-styl-, marquee-play-telling, marquee-rigting en marquee-spoed.
oorloop-styl
Die eienskap oorloopstyl (wat ek ook in die artikel CSS Overflow bespreek het) definieer die voorkeurstyl vir inhoud wat oor die inhoudskassie oorloop. As u die waarde op die markie-reël of marquee-blok stel, sal u inhoud na links / regs (marquee-lyn) of op / af (marquee-blokkie) skuif.
markiestent-styl
Hierdie eiendom definieer hoe die inhoud in die vertoning (en uit) gaan beweeg.
Die opsies is skuif, skuif en alternatiewe. Scroll begin met die inhoud heeltemal af skerm, en dan beweeg dit oor die sigbare gebied totdat dit weer heeltemal buite skerm is. Slide begin met die inhoud heeltemal af skerm en dan beweeg dit oor totdat die inhoud heeltemal op die skerm beweeg het en daar is nie meer inhoud oor om op die skerm te skuif nie.
Laastens, alternatiewe spring die inhoud van kant tot kant, gly heen en weer.
markiestent-play-telling
Een van die nadele van die gebruik van die MARQUEE-element is dat die tentoonstelling nooit ophou nie. Maar met die stalletjie-teller-speel-telling kan jy die tentoonstelling stel om die inhoud vir 'n spesifieke aantal keer aan te skakel.
markiestent-rigting
U kan ook die rigting kies waarop die inhoud op die skerm moet rol. Die waardes vorentoe en omgekeerd is gebaseer op die rigting van die teks wanneer die oorloopstyl marquee-line is en op of af wanneer die oorloopstyl marquee-block is.
Marquee-Direction Besonderhede
| oorloop-styl | Taalrigting | vorentoe | reverse |
|---|---|---|---|
| markiestent-lyn | ltr | links | reg |
| RTL | reg | links | |
| markiestent-blok | up | af |
markiestent-spoed
Hierdie eiendom bepaal hoe vinnig die inhoud blaai op die skerm. Die waardes is stadig, normaal en vinnig. Die werklike spoed hang af van die inhoud en die leser wat dit vertoon, maar die waardes moet stadig wees, stadiger as normaal, wat stadiger as vinnig is.
Browser Ondersteuning van die Marquee Eienskappe
U sal dalk voorverkopervoorvoegsels moet gebruik om die CSS-markeringselemente te laat werk. Hulle is soos volg:
| CSS3 | Verkopersvoorvoegsel |
|---|---|
| oorloop-x: marquee-line; | oorloop-x: -webkit-marquee; |
| markiestent-styl | -webkit-markiestent-styl |
| markiestent-play-telling | -webkit-markiestent-herhaling |
| marquee-direction: forward | reverse; | -webkit-marquee-rigting: vorentoe | terug; |
| markiestent-spoed | -webkit-markiestent-spoed |
| geen ekwivalent nie | -webkit-markiestent-inkrement |
Die laaste eienskap laat u toe om te definieer hoe groot of klein die stappe moet wees as die inhoudrolle op die skerm in die tentoonstelling.
Om jou tentoonstelling te laat werk, moet jy eers die voorafverkose waardes van die verkoper plaas en dan die CSS3-spesifikasiewaardes volg. Byvoorbeeld, hier is die CSS vir 'n markie wat die teks vyf keer van links na regs binne 'n 200x50-boks blaai.
{
breedte: 200px; hoogte: 50px; wit-ruimte: nowrap;
oorloop: verborge;
oorloop-x: -webkit-markiestent;
-webkit-marquee-rigting: vorentoe;
-webkit-marquee-styl: blaai;
-webkit-marquee-spoed: normaal;
-webkit-marquee-inkrement: klein;
-webkit-marquee-herhaling: 5;
oorloop-x: marquee-line;
marquee-rigting: vorentoe;
marquee-styl: rol;
marquee-spoed: normaal;
marquee-play-telling: 5;
}