HTMLマーキータグで画像のスクロールを設定するにはどうすればよいですか?マーキータグの画像スクロールコード例

この記事では主に HTML マーキー タグの属性と、マーキー タグの画像スクロールの使用例を紹介します。効果がさらに高まるように、さらに実験してみてください。この記事を一緒に見てみましょう

画像のスクロールを設定するには、まずいくつかの HTML マーキー タグの属性を理解します:

• innerHTML: オブジェクトの開始タグと終了タグ内にある属性を設定または取得しますHTML

• scrollHeight: オブジェクトのスクロールの高さを取得します。

• scrollLeft: オブジェクトの左端とウィンドウ内に現在表示されているコンテンツの左端との間の距離を設定または取得します。

• scrollTop: オブジェクトの最上端とウィンドウ内で一番上に表示されているコンテンツの距離

• scrollWidth: オブジェクトのスクロール幅を取得します

• offsetHeight: レイアウトまたは offsetParent プロパティで指定された親座標を基準としたオブジェクトの高さを取得します

• offsetLeft : レイアウトまたは offsetParent プロパティを基準としたオブジェクトの高さを取得します 指定された親座標の計算された左位置を取得します

• offsetTop: レイアウトまたは offsetTop で指定された親座標を基準とした計算されたオブジェクトの上の位置を取得しますproperty

• offsetWidth: offsetParent プロパティで指定されたレイアウトまたは親座標を基準としたオブジェクトを取得します。親座標の幅

これを理解できたら、スクロールの例を見てみましょう。

<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/imghwm/default1.png"  data-src="https://img.php.cn/upload/course/000/126/153/5aa23f0ded921649.jpg"  class="lazy"   alt="HTMLマーキータグで画像のスクロールを設定するにはどうすればよいですか?マーキータグの画像スクロールコード例" >
　</marquee >

上に画像を挿入しました。効果は動的で、スクリーンショットはあまり良くありませんが、画像に示すように、こちらもご覧ください:

これはシームレスにスクロールします。原理を理解する前に、内部の特性を理解する必要があります。実際、これは難しいことではありません。

html マーキー タグの画像スクロール手順:

1. 中央のコンテンツには、テキスト、画像、または によって生成されたテキストを使用できます。プログラムまたは画像

2.onMouseOut="this.start()": マウスが領域の外に出たときにスクロールを続けるように設定するために使用されます

onMouseOver="this.stop()": マウスを次のように設定するために使用されます領域内に移動したらスクロールを停止します

html マーキータグの画像スクロール コードは次のとおりです:

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

• behavior: スクロール方法を設定します

• alternate: 両端の間で前後にスクロールすることを示します。

• スクロール: 一方の端からもう一方の端までスクロールすることを意味し、それを繰り返します。

• スライド: 繰り返さずに一方の端からもう一方の端までスクロールすることを意味します。

html マーキータグの画像スクロールコードは次のとおりです:

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

bgcolor: アクティブな字幕の背景色を設定します。 背景色は、RGB、16 進数値形式、または色の名前で設定できます。

HTML マーキー タグの利点:

ページの自動スクロール効果は JavaScript で実現できますが、今日偶然 HTML タグを発見しました - でさまざまなスクロールを実現できます。 JS コントロールを使用しないエフェクト。

マーキータグを使用すると、テキストだけでなく画像や表なども移動できます

【編集者おすすめ】

HTMLでフォントの色を設定するにはどうすればよいですか？ CSSで文字の色を設定する方法を紹介

HTMLのAタグの色を設定するにはどうすればいいですか？ハイパーリンクの色設定まとめ(CSS風)

以上がHTMLマーキータグで画像のスクロールを設定するにはどうすればよいですか?マーキータグの画像スクロールコード例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。