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

Beispielcode zur Implementierung von Anti-Shake in Vue

Anti-Shake: Verhindert, dass wiederholte Klicks E...

So implementieren Sie Zeilenumbrüche im Texteingabebereich von Textarea

Wenn Sie den Text im Textarea-Eingabebereich umbre...

So gehen Sie mit verstümmelten Zeichen in der MySQL-Datenbank um

In MySQL können in der Datenbank fehlerhafte Zeic...

Interpretieren von MySQL-Client- und Serverprotokollen

Inhaltsverzeichnis MySQL-Client/Server-Protokoll ...

Über nginx zur Implementierung des Jira-Reverse-Proxys

Zusammenfassung: Nginx-Reverse-Proxy für JIRA kon...

CSS-Randüberlappungen und wie man sie verhindert

Die vertikal benachbarten Kanten zweier oder mehr...

Verwenden Sie Javascript, um eine dynamische QQ-Registrierungsseite zu erstellen

Inhaltsverzeichnis 1. Einleitung 1. Grundlayout 2...

So zeigen Sie den Nginx-Konfigurationsdateipfad und den Ressourcendateipfad an

Zeigen Sie den Pfad der Nginx-Konfigurationsdatei...

Achten Sie bei der Webseitenerstellung auf die Verwendung von HTML-Tags

Dieser Artikel stellt einige Aspekte von HTML-Tag...

Über das Problem der vertikalen Zentrierung von img und span in div

Wie unten dargestellt: XML/HTML-CodeInhalt in die...