Skip to main content

MARQUEE i alderen af ​​HTML5 og CSS3

Simple Gesture Recognition To Create Virtual Mouse | using OpenCV and Python (Tutorial) Part 1 (Juni 2025)

Simple Gesture Recognition To Create Virtual Mouse | using OpenCV and Python (Tutorial) Part 1 (Juni 2025)
Anonim

Dem, der har skrevet HTML i lang tid, kan huske elementet. Dette var et browser-specifikt element, der oprettede et banner for at rulle tekst på tværs af skærmen. Dette element blev aldrig tilføjet til HTML-specifikationen, og støtten til det varierede bredt på tværs af browsere. Folk havde ofte meget stærke meninger om brugen af ​​dette element - både positive og negative. Men om du elskede eller hadede det, tjente det formålet med at gøre indhold, der oversvømmede boksens grænser synlige.

En del af grunden til, at den aldrig blev fuldt implementeret af browsere, bortset fra stærk personlig mening, var, at det betragtes som en visuel effekt, og den bør derfor ikke defineres af HTML, som definerer strukturen. I stedet skal visuelle eller præsentationseffekter styres af CSS. Og CSS3 tilføjer markeringsmodulet til at kontrollere, hvordan browsere tilføjer markeringseffekten til elementer.

Nye CSS3 Egenskaber

CSS3 tilføjer fem nye egenskaber for at hjælpe med at kontrollere, hvordan dit indhold vises i markeringen: overflow-stil, telt-stil, lysavis-play-count, telt-retningen og telt-hastighed.

overflow-stilDet overflow-stil ejendom (som jeg også diskuterede i artiklen CSS Overflow) definerer den foretrukne stil for indhold, der overlader indholdsboksen. Hvis du indstiller værdien til telt-line eller telt-blok dit indhold glider ind og ud til venstre / højre (telt-line) eller op / ned (telt-blok).

telt-stilDenne egenskab definerer, hvordan indholdet flyttes til visning (og ud).

Indstillingerne er rulle, glide og skifte. Scroll starter med indholdet helt ud af skærmen, og derefter bevæger det sig over det synlige område, indtil det er helt helt væk fra skærmen igen. Slide starter med indholdet helt ud af skærmen og derefter bevæger det sig over, indtil indholdet er fuldt flyttet på skærmen, og der er ikke mere indhold tilbage til at glide på skærmen.

Endelig springer alternativt indholdet fra side til side, glider frem og tilbage.

lysavis-play-countEn af ulemperne ved at bruge MARQUEE element er, at marquee aldrig stopper. Men med stilegenskaben lysavis-play-count Du kan indstille markeringen til at rotere indholdet til og fra for et bestemt antal gange.

telt-retningenDu kan også vælge den retning, som indholdet skal rulle på skærmen. Værdierne frem og bagside er baseret på retningen af ​​teksten, når overflow-stil er telt-line og op eller ned, når overflow-stil er telt-blok.

Marquee-Direction detaljer

overflow-stilSprogretningfrembagside
telt-lineltrvenstreret
RTLretvenstre
telt-blok opned

telt-hastighedDenne egenskab bestemmer, hvor hurtigt indholdet ruller på skærmen. Værdierne er langsom, normal, og hurtig. Den faktiske hastighed afhænger af indholdet og browseren, der viser det, men værdierne skal være langsom er langsommere end normal hvilket er langsommere end hurtig.

Browser Support af Marquee Egenskaber

Du skal muligvis bruge leverandørpræfikser for at få CSS markeringselementerne til at fungere. De er som følger:

CSS3Leverandørens præfiks
overflow-x: marquee-line;overflow-x: -webkit-marquee;
telt-stil-webkit-telt-stil
lysavis-play-count-webkit-telt-gentagelse
marquee-direction: forward | reverse;-webkit-marquee-retning: fremad | tilbage;
telt-hastighed-webkit-telt-hastighed
ingen ækvivalent-webkit-telt-tilvækst

Den sidste egenskab giver dig mulighed for at definere, hvor stort eller lille trinene skal være, når indholdet ruller på skærmen i markeringen.

For at få din markeringsramme til at fungere, bør du først sætte sælgerens præfikserede værdier og derefter følge dem med CSS3-specifikationsværdierne. For eksempel er her CSS for en markeringsramme, der ruller teksten fem gange fra venstre til højre inde i en 200x50 boks.

{ bredde: 200px; højde: 50px; hvid-rum: nowrap; overløb: skjult; overflow-x: -webkit-marquee; -webkit-marquee-retning: fremad; -webkit-marquee-stil: scroll; -webkit-marquee-hastighed: normal; -webkit-marquee-increment: small; -webkit-marquee-repetition: 5; overflow-x: marquee-line; marquee-retning: fremad; marquee-style: scroll; marquee-speed: normal; marquee-play-count: 5;}