Beispiele für die Verwendung von HTML-Marquee-Tags

Beispiele für die Verwendung von HTML-Marquee-Tags
Dieses Tag ist nicht Teil von HTML3.2 und unterstützt nur MSIE3 und spätere Kernel. Wenn Sie also einen Nicht-IE-Kernel-Browser (wie Netscape) verwenden, können Sie möglicherweise einige der folgenden interessanten Effekte nicht sehen. Dieses Tag ist ein Container-Tag

Rollcode für Laufschriftankündigungen

Der einfachste Scrollcode für Website-Ankündigungen, basierend auf Marquee, das vertikale Nach-oben-Scrollen im Tabellenformat, kann auch verwendet werden, wenn Sie kein CSS kennen.


Tipp: Sie können einen Teil des Codes vor dem Ausführen ändern


Grammatik:

<Festzelt></Festzelt>

Hier ist ein einfaches Beispiel:

Der Code lautet wie folgt:

Code kopieren
Der Code lautet wie folgt:

<marquee><font size=+3 color=red>Hallo Welt</font></marquee>

Die folgenden beiden Ereignisse werden häufig verwendet:

onMouseOut="this.start()": Wird verwendet, um die Maus so einzustellen, dass sie weiter scrollt, wenn sie den Bereich verlässt
onMouseOver="this.stop()": wird verwendet, um das Scrollen zu stoppen, wenn die Maus in diesen Bereich bewegt wird

Der Code lautet wie folgt:

Code kopieren
Der Code lautet wie folgt:

<marquee onMouseOut="this.start()" onMouseOver="this.stop()">onMouseOut="this.start()" : Wird verwendet, um die Maus so einzustellen, dass sie weiter scrollt, wenn sie den Bereich verlässt. onMouseOver="this.stop()" : Wird verwendet, um die Maus so einzustellen, dass sie mit dem Scrollen aufhört, wenn sie in den Bereich hinein bewegt wird.</marquee>

Hier ist ein vollständiges Beispiel:

Der Code lautet wie folgt:

Code kopieren
Der Code lautet wie folgt:

<marquee id="Anzeige" align="left" behavior="scroll" bgcolor="#FF0000" direction="up" height="300" width="200" hspace="50" vspace="20" loop="-1" scrollamount="10" scrolldelay="100" onMouseOut="this.start()" onMouseOver="this.stop()">
Hier ist ein vollständiges Beispiel
</Festzelt>

Dieses Tag unterstützt bis zu 11 Attribute:

ausrichten

Legen Sie die Ausrichtung des <marquee>-Tag-Inhalts fest
absbottom: Absolute untere Ausrichtung (ausgerichtet an der Unterseite von Buchstaben wie g und p)
absmiddle: absolute zentrierte Ausrichtung
Grundlinie: Ausrichtung am Endergebnis
unten: untere Ausrichtung (Standard)
left: linksbündig
Mitte: mittlere Ausrichtung
right: rechtsbündig
texttop: Ausrichtung der oberen Zeile
oben: obere Ausrichtung

Der Code lautet wie folgt:

Code kopieren
Der Code lautet wie folgt:

<marquee align="absbottom">align="absbottom": absolute Ausrichtung unten (ausgerichtet an der Unterseite von Buchstaben wie g und p). </Festzelt>
<marquee align="absmiddle">align="absmiddle": absolute Zentrierung. </Festzelt>
<marquee align="baseline">align="baseline": Grundlinie ausrichten. </Festzelt>
<marquee align="bottom">align="bottom": Ausrichtung unten (Standard). </Festzelt>
<marquee align="left">align="left": linksbündig. </Festzelt>
<marquee align="middle">align="middle": mittig ausrichten. </Festzelt>
<marquee align="right">align="right": rechtsbündig. </Festzelt>
<marquee align="texttop">align="texttop": oberste Zeile ausgerichtet. </Festzelt>
<marquee align="top">align="top": obere Ausrichtung. </Festzelt>

Verhalten

Legen Sie die Bildlaufmethode fest:

abwechselnd: bedeutet, zwischen den beiden Enden hin und her zu rollen.
scrollen: bedeutet, von einem Ende zum anderen zu scrollen und dies zu wiederholen.
Slide: bedeutet, von einem Ende zum anderen zu scrollen, ohne es zu wiederholen.

Der Code lautet wie folgt:

Code kopieren
Der Code lautet wie folgt:

<marquee behavior="alternate">alternate: bedeutet, zwischen den beiden Enden hin und her zu scrollen. </Festzelt>
<marquee behavior="scroll">scroll: bedeutet, von einem Ende zum anderen zu scrollen und dies zu wiederholen. </Festzelt>
<marquee behavior="slide">slide: bedeutet, von einem Ende zum anderen zu scrollen, ohne es zu wiederholen. </Festzelt>

Hintergrundfarbe

Legen Sie die Hintergrundfarbe des aktiven Untertitels fest. Die Hintergrundfarbe kann im RGB-, Hexadezimalwert-Format oder als Farbname festgelegt werden.

Der Code lautet wie folgt:

Code kopieren
Der Code lautet wie folgt:

<marquee bgcolor="#006699">Setze die Hintergrundfarbe des aktiven Untertitels bgcolor="#006699"</marquee>
<marquee bgcolor="RGB(10%,50%,100%,)">Setzen Sie die Hintergrundfarbe der aktiven Untertitel bgcolor="rgb(10%,50%,100%,)"</marquee>
<marquee bgcolor="red">Setze die Hintergrundfarbe des aktiven Untertitels bgcolor="red"</marquee>

Richtung

Stellen Sie die Scrollrichtung der aktiven Untertitel ein

Der Code lautet wie folgt:

Code kopieren
Der Code lautet wie folgt:

<marquee direction="down">Legt die Scrollrichtung des aktiven Untertitels fest direction="down": nach unten</marquee>
<marquee direction="left">Legt die Scrollrichtung des aktiven Untertitels fest direction="left": left</marquee>
<marquee direction="right">Legt die Scrollrichtung des aktiven Untertitels fest direction="right": right</marquee>
<marquee direction="up">Legt die Scrollrichtung des aktiven Untertitels fest direction="up": nach oben</marquee>

Höhe

Stellen Sie die Höhe des aktiven Untertitels ein

Der Code lautet wie folgt:

Code kopieren
Der Code lautet wie folgt:

<marquee height="500" direction="down" bgcolor="#CCCCCC">Stellen Sie die Höhe des aktiven Untertitels ein height="500"</marquee>

Breite

Stellen Sie die Breite des aktiven Untertitels ein

Der Code lautet wie folgt:

Code kopieren
Der Code lautet wie folgt:

<marquee width="500" bgcolor="#CCCCCC">Legen Sie die Breite des aktiven Untertitels fest width="500"</marquee>

hraum

Legen Sie den Abstand zwischen der Position des aktiven Untertitels und dem horizontalen Rand des übergeordneten Containers fest.

Dies steuert den horizontalen Raum um das Anzeigefeld.

Der Code lautet wie folgt:

Code kopieren
Der Code lautet wie folgt:

<Tabelle Breite="500" Rahmen="1" Ausrichtung="Mitte" Zellpadding="0" Zellabstand="0">
<tr>
<td><marquee hspace="100" bgcolor="#CCCCCC">hspace="100"</marquee></td>
</tr>
</Tabelle>

vraum

Legen Sie den Abstand zwischen der Position des aktiven Untertitels und der vertikalen Grenze des übergeordneten Containers fest.

Dadurch wird der vertikale Raum um das Anzeigefeld gesteuert.

Der Code lautet wie folgt:

Code kopieren
Der Code lautet wie folgt:

<marquee vspace="100" bgcolor="#CCCCCC">hspace="100"</marquee>

Schleife

Legen Sie die Anzahl der Scrollvorgänge fest. Wenn loop=-1 ist, bedeutet dies, dass die ganze Zeit gescrollt wird. Der Standardwert ist -1
Der Code lautet wie folgt:

Code kopieren
Der Code lautet wie folgt:

<marquee loop="-1" bgcolor="#CCCCCC">Ich werde weitergehen. </Festzelt>
<p>&nbsp;</p>
<marquee loop="2" bgcolor="#CCCCCC">Ich gehe nur zweimal</marquee>

Bildlaufbetrag

Stellen Sie die Scrollgeschwindigkeit der aktiven Untertitel in Pixeln ein

Der Code lautet wie folgt:

Code kopieren
Der Code lautet wie folgt:

<marquee scrollamount="10" >scrollamount="10" </marquee>
<marquee scrollamount="20" >scrollamount="20" </marquee>
<marquee scrollamount="30" >scrollamount="30" </marquee>

Bildlaufverzögerung

Legen Sie die Verzögerungszeit zwischen dem zweimaligen Scrollen des aktiven Untertitels in Millisekunden fest.
Ist der Wert zu groß, tritt ein Pauseneffekt auf.

Der Code lautet wie folgt:

Code kopieren
Der Code lautet wie folgt:

<marquee scrolldelay="10" >scrolldelay="10" </marquee>
<marquee scrolldelay="100" > scrolldelay="100" </marquee>
<marquee scrolldelay="1000">Scrollverzögerung="1000" </marquee>

<<:  Neues CSS3-Layout: ausführliche Flex-Erklärung

>>:  Vue.js verarbeitet Icon-Symbole über Komponenten

Artikel empfehlen

So verwenden Sie den Skeleton-Bildschirm im Vue-Projekt

Heutzutage ist die Anwendungsentwicklung grundsät...

Detaillierte Erläuterung der Verwendung der MySQL-Verkettungsfunktion CONCAT

In den vorherigen Artikeln wurden die Ersetzungsf...

Eine kurze Analyse des Unterschieds zwischen ref und toRef in Vue3

1. ref wird kopiert, die Ansicht wird aktualisier...

Analyse der grundlegenden Verwendung von ul und li

Navigation, kleine Datenmenge Tabelle, zentriert &...

Detaillierte Erklärung des Linux-Kernel-Makros Container_Of

Inhaltsverzeichnis 1. Wie werden Strukturen im Ge...

Natives JS zur Implementierung eines Hover-Dropdown-Menüs

JS implementiert ein Hover-Dropdown-Menü. Dies is...

Erläuterung der Faktoren, die die Datenbankleistung in MySQL beeinflussen

Eine Geschichte über die Datenbankleistung Währen...

So exportieren Sie die MySQL-Tabellenstruktur nach Excel

Die Voraussetzungen sind wie folgt Exportieren Si...

TypeScript-Aufzählungstypen im Detail erklären

Inhaltsverzeichnis 1. Digitale Aufzählung 2. Zeic...

Beispielcode für den Song-Fortschrittsbalken in Vue

Beachten Sie, dass dies kein von vue-cli erstellt...

Miniprogramm zur Implementierung einer einfachen Listenfunktion

In diesem Artikelbeispiel wird der spezifische Co...

Wie melde ich mich per Remote-Zugriff bei der MySql-Datenbank an?

Einführung: Manchmal müssen wir zur Entwicklung e...

Vue realisiert Bildwechseleffekt

In diesem Artikelbeispiel wird der spezifische Co...