Comment définir le défilement de l'image dans la balise de sélection HTML ? Exemple de code de défilement d'image pour la balise de sélection

Cet article présente principalement les attributs des balises de sélection HTML et des exemples d'utilisation du défilement d'images des balises de sélection. Vous pouvez expérimenter davantage, afin que l'effet soit meilleur. Regardons ensemble cet article

Pour configurer le défilement des images, nous comprenons d'abord les attributs de plusieurs balises de sélection html :

• innerHTML : Définissez ou récupérez le HTML situé dans les balises de début et de fin de l'objet

• scrollHeight : Obtenez la hauteur de défilement de l'objet.

• scrollLeft : Définit ou obtient la distance entre le bord gauche de l'objet et l'extrémité la plus à gauche du contenu actuellement visible dans la fenêtre

• scrollTop : Définit ou récupère la distance entre le haut de l'objet et le haut du contenu visible dans la fenêtre

• scrollWidth : Récupère la largeur de défilement de l'objet

• offsetHeight : récupère la hauteur de l'objet par rapport à la mise en page ou la coordonnée parent spécifiée par la propriété offsetParent

• offsetLeft : récupère la position gauche calculée de l'objet par rapport à la mise en page ou à la coordonnée parent spécifiée par la propriété offsetParent

• offsetTop : Obtient la position supérieure calculée de l'objet par rapport à la mise en page ou à la coordonnée parent spécifiée par la propriété offsetTop

• offsetWidth : obtient l'objet par rapport à la mise en page ou la largeur de la coordonnée parent spécifiée par l'attribut offsetParent de la coordonnée parent

Après avoir pu Pour comprendre cela, regardons un exemple de défilement :

<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="Comment définir le défilement de l'image dans la balise de sélection HTML ? Exemple de code de défilement d'image pour la balise de sélection" >
　</marquee >

J'ai inséré une photo ci-dessus, l'effet est dynamique, la capture d'écran n'est pas très bonne, mais il faut en prendre une regardez, comme le montre l'image :

C'est sans le défilement des coutures. Nous devons comprendre les propriétés à l’intérieur avant de pouvoir comprendre le principe. En fait, ce n'est pas difficile.

Instructions de défilement de l'image de la balise de sélection HTML :

1.Le contenu du le milieu peut être du texte, des images ou du texte ou des images générés par le programme

2.onMouseOut="this.start()": utilisé pour configurer la souris pour qu'elle continue à défiler lorsqu'elle quitte la zone

onMouseOver= "this.stop()": utilisé pour configurer la souris pour qu'elle arrête le défilement lorsqu'elle se déplace dans cette zone

Le code de défilement de l'image pour la balise de sélection html est le suivant suit :

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

• comportement : définissez la méthode de défilement

• alternative : signifie faire défiler d'avant en arrière entre les deux extrémités.

• scroll : signifie défiler d'un bout à l'autre, et sera répété.

• slide : signifie défiler d'un bout à l'autre sans répétition.

Le code de défilement de l'image de la balise html marquee est le suivant :

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

bgcolor : Définit la couleur de fond des sous-titres actifs La couleur d'arrière-plan peut être RVB, au format de valeur hexadécimale ou au nom de la couleur à définir.

Avantages de la balise html marquee :

L'effet de défilement automatique de la page peut être obtenu par javascript, mais aujourd'hui j'ai accidentellement découvert une balise html - Une variété d’effets de défilement peuvent être obtenus sans contrôle js.

L'utilisation des balises de sélection permet non seulement de déplacer du texte, mais également des images, des tableaux, etc.

[Recommandation de l'éditeur]

Comment définir la couleur de la police en HTML ? Introduction à la façon de définir la couleur de la police en CSS

Comment définir la couleur d'une balise html ? Récapitulatif des paramètres de couleurs pour les hyperliens (style css)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!