Skip to main content

MARQUEE HTML5 un CSS3 vecumā

Anonim

Tie no jums, kuri ilgu laiku rakstījuši HTML, var atcerēties elementu. Tas bija pārlūkprogrammai raksturīgs elements, kas visā ekrānā izveidoja rullīša tekstu. Šis elements nekad nav pievienots HTML specifikācijai, un tā atbalstam visās pārlūkprogrammās bija ļoti atšķirīgs. Cilvēkiem bieži bija ļoti spēcīgi viedokļi par šī elementa izmantošanu - gan pozitīvu, gan negatīvu. Bet vai jūs to mīlēja vai ienīda, tas kalpoja tam, lai izveidotu saturu, kas pārklāja redzamās lodziņa robežas.

Daļa no iemesla, kāds pārlūkprogrammām to pilnībā neīstenoja, izņemot personīgo viedokli, bija tas, ka tas tiek uzskatīts par vizuālu efektu, un tādēļ to nevajadzētu definēt HTML, kas definē struktūru. Tā vietā vizuālas vai prezentācijas sekas jāpārvalda CSS. Un CSS3 pievieno marķējuma moduli, lai kontrolētu, kā pārlūkprogrammas elementiem pievieno marķējuma efektu.

Jaunas CSS3 īpašības

CSS3 pievieno piecas jaunas īpašības, lai palīdzētu kontrolēt to, kā jūsu saturs tiek rādīts laukumā: pārpildes stils, marķiera stils, marquee-play-count, marķējuma virziens un marķiera ātrums.

pārpildes stilsThe pārpildes stils īpašums (ko es arī apsprieda rakstā CSS Overflow) definē vēlamo satura veidu, kas pārpilda satura lodziņu. Ja jūs iestatāt vērtību uz marķiera līnija vai jumta bloks jūsu saturs tiks pārvietots pa kreisi / pa labi (marķiera līnija) vai uz augšu / uz leju (jumta bloks).

marķiera stilsŠis īpašums nosaka, kā saturs tiks pārvietots skatā (un ārpus tā).

Iespējas ir ritiniet, slidkalniņš un aizstājējs. Ritināšana sākas ar saturu pilnīgi izslēgtā ekrānā, un tad tas pārvietojas pa redzamo laukumu, līdz tas atkal ir pilnīgi izslēgts. Slaids sākas ar saturu pilnīgi izslēgtā ekrānā, un pēc tam tas pāriet līdz brīdim, kad saturs ir pilnībā pārvietots uz ekrāna, un ekrānam nav bijušas vairāk informācijas.

Visbeidzot, aizstājējs atslābina saturu no vienas puses uz otru, slīdot uz priekšu un atpakaļ.

marquee-play-countViens no trūkumiem, kā izmantot MARQUEE elements ir tas, ka telts nekad neapstājas. Bet ar stila īpašumu marquee-play-count jūs varat iestatīt marķējumu, lai konkrētu skaitu reižu pagrieztu saturu un izslēgtu to.

marķējuma virziensJūs varat arī izvēlēties virzienu, kādā saturam vajadzētu ritināt ekrānā. Vērtības uz priekšu un mainīt ir balstīti uz teksta virzienu, kad pārpildes stils ir marķiera līnija un augšup vai lejup, kad pārpildes stils ir jumta bloks.

Marķiera virziena detaļas

pārpildes stilsValodas virziensuz priekšumainīt
marķiera līnijaltrpa kreisipa labi
rtlpa labipa kreisi
jumta bloks uz augšuuz leju

marķiera ātrumsŠis īpašums nosaka, cik ātri saturs ritina ekrānā. Vērtības ir lēns, normāls, un ātri. Faktiskais ātrums ir atkarīgs no satura un pārlūka, kurā tas parādās, bet vērtībām jābūt lēns ir lēnāks nekā normāls kas ir lēnāks nekā ātri.

Marķiera īpašību pārlūka atbalsts

Lai iegūtu CSS marķiera elementus darbam, jums, iespējams, būs nepieciešams izmantot piegādātāja prefiksus. Tie ir šādi:

CSS3Piegādātāja prefikss
pārpilde-x: marquee-line;pārpilde-x: -webkit-marquee;
marķiera stils-webkit-marquee-stila
marquee-play-count-webkit-marquee-atkārtojums
marķējuma virziens: uz priekšu | reverss;-webkit-marķiera virziens: uz priekšu | atpakaļ;
marķiera ātrums-webkit-marquee-ātrums
nav ekvivalenta-webkit-marquee-pieaugums

Pēdējais īpašums ļauj noteikt, cik lielas vai mazas ir vajadzīgās darbības, kad saturs ritē ekrānā.

Lai jūsu telts darbotos, vispirms vispirms jāpievieno piegādātāju prefiksu vērtības un pēc tam izpildiet CSS3 specifikācijas vērtības. Piemēram, šeit ir CSS marķierim, kas ritina tekstu piecas reizes no kreisās uz labo lodziņā ar 200x50.

{ platums: 200 pikseļi; augstums: 50 pikseļi; balta vieta: tagad; pārplūde: slēpta; pārpilde-x: -webkit-marquee; -webkit-marķējuma virziens: uz priekšu; -webkit-marquee-style: ritiniet; -webkit-marķiera ātrums: normāls; -webkit-marquee-increment: mazs; -webkit-marquee-atkārtojums: 5; pārpilde-x: marquee-line; marķiera virziens: uz priekšu; marķiera stils: ritiniet; marķiera ātrums: normāls; marķiera spēles skaits: 5;}