Déi vun Iech, déi HTML fir eng laang Zäit schreiwen, kënnen den Element erënneren. Dëst war e browsergestützte Element, deen e Banner iwwer d'Bildschierm erofgeluede gouf. Dëse Element ass ni bei der HTML Spezifizéierung an Ënnerstëtzung fir si verbreet iwwer d'Browser verbreet. D'Leit hu sech ganz staark Meenung iwwer d'Benotzung vun dësem Element - souwuel positiv an negativ. Awer Dir hutt et gär oder gehaasst, huet et den Zweck gemaach fir Inhalter ze maachen déi de Këschteggrenz gesinn huet.
Een Deel vun dem Grond war et ni vu Browsers, ausser vun der perséinlecher Meenungsäusserung, implementéiert ginn ass, datt et als visuell Effekt ugesinn a als solches soll et net vum HTML definéiert ginn, wat d'Struktur definéiert. Anstatt visuell oder Presentatiounseffekter sollten duerch CSS verwaltet ginn. A CSS3 fiert den Marquee-Modul fir ze kontrolléieren wéi Browsers den Marquee-Effekt op Elementer addéieren.
New CSS3 Properties
CSS3 fënnt fënnef nei Eegeschafte fir ze kontrolléieren wéi Är Inhalte am Marché affichéieren: Iwwerflow-Stil, Marquee-Stil, Marquee-Play-count, Marquee-Direction a Markéierter.
Iwwerstroum-Stil
Déi Iwwerstroum-Stil (déi ech och am Artikel CSS Overflow diskutéiert huet) definéiert den bevorzugte Stil fir Inhalter, déi de Inhalt Këscht iwwerdréit. Wann Dir de Wäert op Marquee-Linn oder Marquee-Block benotzt gëtt, gëtt Äre Inhalt Inhalt an der lénks / riets (Marquee-Line) oder op / down (Marquee-Block).
Marquee-Stil
Dëse Besëtz definéiert wéi de Inhalt Inhalt an A kuckt.
D'Optioune si roueg, rutschen an alternativ. Scrollen fänkt mat dem Inhalt komplett aus dem Bildschirm eraus a fänkt dann iwwer de sichtbare Raum un, bis et komplett komplett aus dem Bildschierm geet. Di Slide fänkt mat dem Inhalt komplett aus dem Bildschierm a fänkt un obwuel de Inhalt komplett op den Écran bewegt gëtt an et gëtt keng méi Inhalter méi gedréckt op dem Bildschierm.
Zweetens, alternativ drénken den Inhalt vu säitlech bis hin an réckelzeg an zréck.
Marquee-Play-count
Ee vun de Nodeeler vun der Markéierung vum MARQUEE ass, datt de Marque ni méi stoppt. Mä mat der Stilméie marquee-play-count kënnt Dir de Marquee setzen fir den Inhalt op a fir e bestëmmten Zäiten ze drecken.
Marquee-Direktioun
Dir kënnt och d'Richtung auswielen, déi de Inhalt am Scrollen ze scrollen. D'Wäerter virun an ëmgedréint baséiert op der Directionalitéit vum Text, wann de Iwwerflow-Stil d'Markéierungs-Linn ass oder up oder down wann de Iwwerflow-Stil markéiert ass.
Marquee-Direction Detailer
| Iwwerstroum-Stil | Sprooche Richtung | vir | ëmgoen |
|---|---|---|---|
| Marquee-Linn | ltr | lénks | riets |
| rtl | riets | lénks | |
| Marquee-Block | up | erof |
Marquee-speed
Dës Eigenschaft determinéiert wéi séier de Inhalt Inhalt um Bildschirm scrollt. D'Wäerter gi lues, normal an schnell. D'aktuelle Geschwindegkeets hänkt vum Inhalt an de Browser z'ënnerhuelen, awer d'Wäerter muss lues méi lues wéi normal sinn, wat méi lues wéi séier ass.
Browser Support vun de Marquee Properties
Dir musst Iech Vendor Präfixe benotzen fir d'CSS Marquee Elementer ze schaffen. Si si wéi folgend:
| CSS3 | Vendor Präfix |
|---|---|
| iwwerflow-x: marquee-line; | Iwwerfluss-x: -webkit-marquee; |
| Marquee-Stil | -webkit-marquee-style |
| Marquee-Play-count | -webkit-marquee-repetition |
| Marquee-Direktioun: Forward | ëmgeet; | -webkit-marquee-direction: Forward | rd. |
| Marquee-speed | -webkit-marquee-speed |
| kee Gläichgewiicht | -webkit-marquee-inkrement |
Déi lescht Eigenschaft erméiglecht Iech festzeleeën wéi grouss oder kleng d'Schrëtt misse sinn wéi den Inhalt am Bildschirm scrollt.
Fir Är Marquee ze schaffen, sollt Dir de Verkäufer virgesin d'Wäerter zuerst setzen an dann mat de CSS3-Spezifizéierungswäert ze befollegen. Zum Beispill, hei ass de CSS fir en Marquee, deen den Text fënneff Méint vu lénks op riets am engem Box vun 200x50 scrollt.
{
Breet: 200px; Héicht: 50px; Wäissraum: Nowrap;
Iwwerstrof: verstoppt;
Iwwerfluss-x: -webkit-marquee;
-webkit-marquee-direction: weider;
-webkit-marquee-style: scroll;
-webkit-marquee-speed: normal;
-webkit-marquee-inkrement: kleng;
-webkit-marquee-repetition: 5;
iwwerflow-x: marquee-line;
Marquee-direction: Forward;
Marquee-Stil: scroll;
Marquise speed: normal;
Marquee-Spillziel: 5;
}}