Das Laufschrift-Tag in HTML erzielt einen nahtlosen Laufschrift-Effekt

Das <marquee>-Tag ist ein Tag, das paarweise vorkommt. Der Inhalt zwischen dem ersten Tag <marquee> und dem letzten Tag </marquee> ist der Scroll-Inhalt. Zu den Hauptattributen des <marquee>-Tags gehören Verhalten, Hintergrundfarbe, Richtung, Breite, Höhe, hspace, vspace, Schleife, Scrollmenge, Scrollverzögerung usw., die alle optional sind.

Als ich heute auf WeChat am Big Wheel-Lotteriespiel teilnahm, wollte ich dafür sorgen, dass die Lotterieaufzeichnungen aller Benutzer nahtlos scrollen. Leider sind meine JS-Kenntnisse zu schlecht und ich konnte mir eine Weile lang keine Möglichkeit vorstellen, dies zu erreichen. Also suchte ich bei Baidu nach verschiedenen ähnlichen Effekten. Aber ich habe zufällig ein HTML-Tag entdeckt – <marquee></marquee>, mit dem sich ohne JS-Steuerung verschiedene Bildlaufeffekte erzielen lassen. Mit dem Laufschrift-Tag können Sie nicht nur Text, sondern auch Bilder, Tabellen usw. scrollen. Die Verwendung ist praktisch und schnell, was mir wirklich viel Zeit spart.

Das Marquee-Tag ist kein Teil von HTML3.2 und wird nur von MSIE3 und späteren Kerneln unterstützt. Wenn Sie also einen anderen Kernel-Browser als IE (wie Netscape) verwenden, können Sie einige der unten aufgeführten interessanten Effekte möglicherweise nicht sehen. Dieses Tag ist ein Container-Tag.

1. Einige wichtige Attribute des Marquee-Tags:

1. Richtung: Scrollrichtung (einschließlich 4 Werte: hoch, runter, links, rechts)

Beschreibung: nach oben: von unten nach oben scrollen; nach unten: von oben nach unten scrollen; nach links: von rechts nach links scrollen; nach rechts: von links nach rechts scrollen.

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

2. Verhalten: Bildlaufmodus (einschließlich 3 Werte: Scrollen, Gleiten, Alternieren)

Beschreibung: Scrollen: in einer Schleife scrollen, der Standardeffekt; Sliden: einmal scrollen und dann anhalten; Alternate: abwechselnd vor und zurück scrollen.

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

3.scrollamount: Bildlaufgeschwindigkeit (mit der Bildlaufgeschwindigkeit wird die Länge der Bewegung bei jedem Bildlauf in Pixeln festgelegt)

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

4.scrolldelay: Stellen Sie die Verzögerungszeit zwischen zweimaligem Scrollen ein. Wenn der Wert zu groß ist, tritt nach einem Schritt ein Pauseneffekt auf (stellen Sie das Scroll-Zeitintervall in Millisekunden ein).

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

5. Schleife: Legen Sie die Anzahl der Bildlaufschleifen fest (der Standardwert ist -1, das Scrollen wird kontinuierlich wiederholt).

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

<marquee loop="-1" bgcolor="#CCCCCC">Ich werde weitergehen. </Festzelt>

<marquee loop="2" bgcolor="#CCCCCC">Ich gehe nur zweimal</marquee>

6. Breite, Höhe: Legen Sie die Breite und Höhe der scrollenden Untertitel fest

Syntax: <marquee width="500" height="200">...</marquee>

7.bgcolor: Legen Sie die Hintergrundfarbe des scrollenden Untertitels fest (kann ein Farbwert oder die Funktion rgb() oder rgba() sein).

Syntax: <marquee bgcolor="rgba(0,0,0,0.2)">...</marquee>

8.hspace, vspace: Leerzeichen (entspricht dem Festlegen des Randwerts)

Beschreibung: hspace: legt den Abstand zwischen der Position des aktiven Untertitels und dem horizontalen Rand des übergeordneten Containers fest. Beispielsweise entspricht hspace="10": margin: 0 10px;

vspace: Legt den Abstand zwischen der Position des aktiven Untertitels und dem vertikalen Rand des übergeordneten Containers fest. Beispielsweise entspricht vspace="10": margin: 10px 0;

Syntax: <marquee hspace="10" vspace="10">...</marquee> (entspricht: margin: 10px;)

9.align: Legen Sie die Ausrichtung des scrollenden Untertitelinhalts fest (einschließlich 9 Werte: absbottom, absmiddle, baseline, bottom, left, middle, right, texttop, top).

Beschreibung: 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

Syntax: <marquee align="alignment">...</marquee>

10.face: Legen Sie die Schriftart der scrollenden Untertitel fest

Syntax: <marquee font="楷体_GB2312"></marquee>

11.color: Legen Sie die Textfarbe der scrollenden Untertitel fest

Syntax: <marquee color="#333"></marquee>

12.size: Stellen Sie die Schriftgröße der scrollenden Untertitel ein

Syntax: <marquee size="3"></marquee>

13.STRONG: Stellen Sie den Text des scrollenden Untertitels auf fett

Syntax: <Marquee STRONG></Marquee>

2. Zwei von Marquee häufig verwendete Ereignisse:

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

 <marquee onMouseOut="this.start()" onMouseOver="this.stop()">Zwei häufig in Marquee verwendete Ereignisse</marquee>

Der vollständige 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()">

Obwohl <marquee> viele Parameter hat, kann es letztendlich nicht zu komplexen und benutzerdefinierten Spezial-Marquee-Effekten führen und es gibt Browsereinschränkungen. Daher verwenden wir in den meisten Fällen JavaScript, um den Marquee-Scroll-Effekt zu erzielen.

Dies ist das Ende dieses Artikels darüber, wie Sie mithilfe des Laufschrift-Tags in HTML einen nahtlosen Laufschrifteffekt erzielen. Weitere relevante Inhalte zu Laufschrifteffekten finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!