Wie stelle ich das Scrollen von Bildern im HTML-Marquee-Tag ein? Codebeispiel zum Scrollen von Bildern für das Marquee-Tag

In diesem Artikel werden hauptsächlich die Attribute von HTML-Marquee-Tags und Beispiele für die Verwendung von Marquee-Tags beim Bildlauf vorgestellt. Sie können mehr experimentieren, um den Effekt zu verbessern. Schauen wir uns gemeinsam diesen Artikel an

Um das Scrollen von Bildern einzurichten, verstehen wir zunächst die Attribute mehrerer HTML-Marquee-Tags:

• innerHTML : Legen Sie den HTML-Code fest oder rufen Sie ihn ab, der sich in den Start- und End-Tags des Objekts befindet.

• scrollHeight: Ermitteln Sie die Bildlaufhöhe des Objekts.

• scrollLeft: Legt den Abstand zwischen dem linken Rand des Objekts und dem äußersten linken Ende des aktuell sichtbaren Inhalts im Fenster fest oder ruft ihn ab

• scrollTop: Legt fest oder ermittelt den Abstand zwischen der Oberkante des Objekts und der Oberkante des sichtbaren Inhalts im Fenster

• scrollWidth: Ermittelt die Bildlaufbreite des Objekts

• offsetHeight: Ruft die Höhe des Objekts relativ zum Layout oder der übergeordneten Koordinate ab, die durch die Eigenschaft offsetParent angegeben wird.

• offsetLeft: Ruft die berechnete linke Position des Objekts relativ ab zum Layout oder der übergeordneten Koordinate, die durch die Eigenschaft offsetParent angegeben wird

• offsetTop: Ruft die berechnete obere Position des Objekts relativ zum Layout oder der übergeordneten Koordinate ab, die durch die Eigenschaft offsetTop

  angegeben wird

• offsetWidth: Ruft das Objekt relativ zum Layout ab oder Die Breite der übergeordneten Koordinate, die durch das OffsetParent-Attribut der übergeordneten Koordinate angegeben wird

Nachdem Sie können Um das herauszufinden, schauen wir uns ein Scroll-Beispiel an:

<marquee 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()">
　需要滚动的文字
　需要滚动的文字
　也可以程序代码
<img  src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/course/000/126/153/5aa23f0ded921649.jpg"  class="lazy"   alt="Wie stelle ich das Scrollen von Bildern im HTML-Marquee-Tag ein? Codebeispiel zum Scrollen von Bildern für das Marquee-Tag" >
　</marquee >

Ich habe oben ein Bild eingefügt, der Effekt ist dynamisch, der Screenshot ist nicht sehr gut, aber wir müssen einen Blick darauf werfen, wie im Bild gezeigt:

Dies ist ein nahtloses Scrollen von. Wir müssen die Eigenschaften im Inneren verstehen, bevor wir das Prinzip verstehen können. Tatsächlich ist es nicht schwierig.

HTML-Marquee-Tag-Bildlaufanweisungen:

1.Der Inhalt im middle kann Text, Bilder oder vom Programm generierter Text oder Bilder sein

2.onMouseOut="this.start()": Wird verwendet, um die Maus so einzustellen, dass sie weiterscrollt, wenn sich die Maus aus dem Bereich bewegt

onMouseOver= „this.stop()“: Wird verwendet, um die Maus so einzustellen, dass sie den Bildlauf stoppt, wenn die Maus in diesen Bereich bewegt wird.

Der Bildlaufcode für das HTML-Marquee-Tag lautet wie folgt folgt:

<marquee align="absbottom">align="absbottom"：绝对底部对齐（与g、p等字母的最下端对齐）。 </marquee>
<marquee align="absmiddle">align="absmiddle"： 绝对中央对齐。 </marquee>
<marquee align="baseline">align="baseline"： 底线对齐。 </marquee>
<marquee align="bottom">align="bottom"： 底部对齐（默认）。 </marquee>
<marquee align="left">align="left"： 左对齐。 </marquee>
<marquee align="middle">align="middle"： 中间对齐。 </marquee>
<marquee align="right">align="right"： 右对齐。 </marquee>
<marquee align="texttop">align="texttop"： 顶线对齐。 </marquee>
<marquee align="top">align="top"： 顶部对齐。 </marquee>

• Verhalten: Legen Sie die Scroll-Methode fest

• alternativ: bedeutet Hin- und Herscrollen zwischen den beiden Enden.

• scrollen: bedeutet, von einem Ende zum anderen zu scrollen und wird wiederholt.

• gleiten: bedeutet, ohne Wiederholung von einem Ende zum anderen zu scrollen.

Der Bildlaufcode des HTML-Marquee-Tags lautet wie folgt:

<marquee behavior="alternate">alternate：表示在两端之间来回滚动。 </marquee>
<marquee behavior="scroll">scroll：表示由一端滚动到另一端，会重复。</marquee>
<marquee behavior="slide">slide：  表示由一端滚动到另一端，不会重复。</marquee>

bgcolor: Legt die Hintergrundfarbe aktiver Untertitel fest kann RGB sein, 16 Legen Sie das Format des Hexadezimalwerts oder des Farbnamens fest.

Vorteile des HTML-Marquee-Tags:

Der automatische Scrolleffekt der Seite kann durch Javascript erreicht werden, aber heute habe ich versehentlich ein HTML-Tag entdeckt – Eine Vielzahl von Scrolleffekten können ohne JS-Steuerung erzielt werden.

Durch die Verwendung von Marquee-Tags können nicht nur Text, sondern auch Bilder, Tabellen usw. verschoben werden.

[Empfehlung des Herausgebers]

So legen Sie die Schriftfarbe in HTML fest ? Einführung in das Festlegen der Schriftfarbe in CSS

Wie stelle ich die Farbe eines HTML-Tags ein? Zusammenfassung der Farbeinstellungen für Hyperlinks (CSS-Stil)

Das obige ist der detaillierte Inhalt vonWie stelle ich das Scrollen von Bildern im HTML-Marquee-Tag ein? Codebeispiel zum Scrollen von Bildern für das Marquee-Tag. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!