HTML-Tag Marquee realisiert verschiedene Scroll-Effekte (ohne JS-Steuerung)

HTML-Tag Marquee realisiert verschiedene Scroll-Effekte (ohne JS-Steuerung)

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

JavaScript 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" content= "text/html; charset=utf-8" />
  5. <title>Unbenanntes Dokument</title>
  6. </Kopf>
  7. <Text>
  8. <div>
  9. <Marquee direction= "nach oben" behavior= "scrollen" scrollamount= "1" scrolldelay= "0" loop= "-1" width= "1000" height= "50" bgcolor= "#0099FF" hspace= "10" vspace= "10" >
  10. 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...
  11. </Festzelt>
  12. </div>
  13. </body>
  14. </html>

<<:  js native Wasserfall-Flow-Plugin-Produktion

>>:  Navicat für MySQL 11 Registrierungscode\Aktivierungscode-Zusammenfassung

Artikel empfehlen

Verwenden von Vue3 (Teil 1) Erstellen eines Vue CLI-Projekts

Inhaltsverzeichnis 1. Offizielle Dokumentation 2....

So verwenden Sie Cursor-Trigger in MySQL

Cursor Die von der Auswahlabfrage zurückgegebenen...

Layui implementiert den Bestätigungscode der Anmeldeschnittstelle

In diesem Artikelbeispiel wird der spezifische Co...

Node erstellt schnell die Backend-Implementierungsschritte

1. Installieren Sie zuerst Node, Express und Expr...

Allgemeine Struktur-Tags in XHTML

Struktur Text, Kopf, HTML, Titel Text abbr, Akron...

Probleme und Lösungen bei der Installation von Mininet auf Ubuntu 16.04.4LTS

Mininet Mininet ist eine leichtgewichtige, softwa...

Gestaltung der Bildvorschau auf der Inhaltswebseite

<br />Ich habe bereits zwei Artikel geschrie...

Detaillierte Erläuterung des vite2.0-Konfigurationslernens (Typescript-Version)

einführen Die ursprünglichen Worte von You Yuxi. ...

Stil-Trigger-Effekt des Webseiten-Eingabefelds

<br />Dieses Beispiel untersucht hauptsächli...