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

React implementiert Endlosschleifen-Scrollinformationen

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

14 Möglichkeiten zum Erstellen von Website-Inhalten, die Ihre Besucher fesseln

Wenn ich im Internet surfe, sehe ich oft Websites...

Detaillierte Verwendung von React.Children

Inhaltsverzeichnis 1. Reagieren.Children.map 2. R...

Beispiel zum Deaktivieren der Browser-Cache-Konfiguration im Vue-Projekt

Beim Freigeben eines Projekts müssen Sie häufig d...

Beispielcode für das MySQL-Indexprinzip ganz links

Vorwort Ich habe kürzlich etwas über MySQL-Indize...

Analyse der Initialisierung des Quellcodes des Linux-Kernel-Schedulers

Inhaltsverzeichnis 1. Einleitung 2. Grundkonzepte...

Eine kurze Analyse der LRU-verknüpften Liste von MySQL

1. Beschreiben Sie kurz die traditionelle LRU-ver...

Detaillierte Erklärung der .bash_profile-Datei im Linux-System

Inhaltsverzeichnis 1. Umgebungsvariable $PATH: 2....

Zusammenfassung der Vorteile der Bereitstellung von MySQL Delayed Slaves

Vorwort Die Master-Slave-Replikationsbeziehung vo...

Docker stellt eine Verbindung zum Host-Mysql-Vorgang her

Heute muss das Unternehmensprojekt Docker konfigu...

So implementieren Sie abgerundete Ecken mit CSS3 unter Verwendung von JS

Ich bin auf ein Beispiel gestoßen, als ich nach e...

mysql installer community 8.0.12.0 grafische anleitung zur installation

Dieses Tutorial beschreibt die Installation der M...