Eine einfache Möglichkeit, mit dem HTML-Tag „Marquee“ einen Scroll-Effekt zu erzielen (unbedingt lesen)

Eine einfache Möglichkeit, mit dem HTML-Tag „Marquee“ einen Scroll-Effekt zu erzielen (unbedingt lesen)

Der automatische Bildlaufeffekt der Seite kann durch JavaScript erzielt werden, aber heute habe ich zufällig ein HTML-Tag entdeckt – <marquee></marquee>, mit dem verschiedene Bildlaufeffekte ohne JS-Steuerung erzielt werden können.

Mit dem Laufschrift-Tag können nicht nur Texte, sondern auch Bilder, Tabellen usw. verschoben werden.

Syntax: <marquee>...</marquee>; Beschreibung: Fügen Sie den Inhalt hinzu, der zwischen den Tags gescrollt werden soll.

Wichtige Eigenschaften:

1. Scrollrichtung (einschließlich 4 Werte: nach oben, unten, links und rechts)

Syntax: <marquee direction="scroll direction">...</marquee>

2. Scrollverhalten (Scrollen: in einer Schleife scrollen, der Standardeffekt; Slide: einmal scrollen und dann anhalten; Alternate: abwechselnd vor und zurück scrollen)

Syntax: <marquee behavior="scroll mode">...</marquee>

3. Scrollgeschwindigkeit Scrollamount (mit der Scrollgeschwindigkeit wird die Länge der Bewegung bei jedem Scrollen in Pixeln festgelegt)

Syntax: <marquee scrollamount="5">...</marquee>

4. Scroll-Verzögerung scrolldelay (Setzen Sie das Scroll-Zeitintervall in Millisekunden)

Syntax: <marquee scrolldelay="100">...</marquee>

5. Scroll-Schleife (der Standardwert ist -1, der Scrollvorgang wird in einer Schleife fortgesetzt)

Syntax: <marquee loop="2">...</marquee>

6. Scrollbereich Breite, Höhe

7. Scrollende Hintergrundfarbe bgcolor

8. Leerzeichen hspace, vspace

Codebeispiel:

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >   
  2. < html   xmlns = "http://www.w3.org/1999/xhtml" >   
  3. <Kopf>   
  4. < Meta   http-equiv = "Inhaltstyp"   Inhalt = "Text/HTML; Zeichensatz=utf-8"   />   
  5. < Titel > Unbenanntes Dokument </ Titel >   
  6. </ Kopf >   
  7.   
  8. < Textkörper >   
  9. <div>   
  10. < Laufschrift   Richtung = "nach oben"   Verhalten = "scrollen"   Bildlaufbetrag = "1"   Scrollverzögerung = "0"   Schleife = "-1"   Breite = "1000"   Höhe = "50"   Hintergrundfarbe = "#0099FF"   hspace = "10"   vspace = "10" >   
  11. Bezieht sich auf die Ausrichtung des gesamten Auswahlrahmens; (2) Verhalten: Legen Sie die Bildlaufmethode fest: Scrollen: bedeutet, von einem Ende zum anderen zu scrollen. Es wird wiederholt, hat aber den Nachteil, dass kein nahtloser Bildlauf möglich ist. Slide: bedeutet, von einem Ende zum anderen zu scrollen, ohne es zu wiederholen...
  12. </Festzelt>   
  13. </div>   
  14. </ Körper >   
  15. </ html >   

Das Obige ist der gesamte Inhalt der einfachen Methode (unbedingt lesen) zur Verwendung des HTML-Tag-Laufbands zum Erzielen eines Bildlaufeffekts. Ich hoffe, es gefällt Ihnen ~

<<:  Eine kurze Diskussion zum Thema Ziehen und Sortieren von Elementen in Tabellen

>>:  So legen Sie Remotezugriffsberechtigungen in MySQL 8.0 fest

Artikel empfehlen

Unicode-Signatur-BOM-Problem (Byte Order Mark) für UTF-8-Dateien

Beim Debuggen einer chinesischen Zen Cart-Website...

Detaillierte Erklärung der Verwendung des MySQL-Paradigmas

1. Paradigma Der englische Name des Paradigmas la...

Detaillierte Erklärung des Unterschieds zwischen Docker-Compose-Ports und Expose

Es gibt zwei Möglichkeiten, Container-Ports in Do...

Einführung in lokale Komponenten in Vue

In Vue können wir lokale Komponenten selbst defin...

20 CSS-Codierungstipps für mehr Effizienz (sortiert)

In diesem Artikel möchten wir eine Sammlung von 2...

Bootstrap realisiert den Karusselleffekt

In diesem Artikel wird der spezifische Code von B...

Implementierung von Socket-Optionen in der Linux-Netzwerkprogrammierung

Socket-Optionsfunktion Funktion: Methoden zum Les...

Implementierungsprinzip und Skriptcode der HTML-Rabattpreisberechnung

Code kopieren Der Code lautet wie folgt: <!DOC...

Ein Beispiel zur Optimierung eines Projekts nach Abschluss des Vue-Projekts

Inhaltsverzeichnis 1. Geben Sie unterschiedliche ...

JavaScript-Canvas zum Erzielen eines Code-Rain-Effekts

In diesem Artikel wird der spezifische Code für C...