HTMLのマーキータグは、シームレスなスクロールマーキー効果を実現します。

<marquee> タグはペアで表示されるタグです。最初のタグ <marquee> と最後のタグ </marquee> の間のコンテンツがスクロール コンテンツになります。 <marquee> タグの主な属性には、behavior、bgcolor、direction、width、height、hspace、vspace、loop、scrollamount、scrolldelay などがありますが、これらはすべてオプションです。

今日、WeChatで大抽選会をしていたとき、すべてのユーザーの抽選記録をシームレスにスクロールさせたいと思いました。残念ながら、私のJSスキルはあまりにも低く、しばらくそれを実現する方法が思いつかなかったので、Baiduで同様の効果をいろいろ検索しました。しかし、偶然、JS 制御なしでさまざまなスクロール効果を実現できる HTML タグ <marquee></marquee> を発見しました。マーキー タグを使用すると、テキストをスクロールできるだけでなく、画像や表などもスクロールできます。便利ですぐに使用できるため、多くの時間を節約できます。

marquee タグは HTML3.2 の一部ではなく、MSIE3 以降のカーネルでのみサポートされています。そのため、IE カーネル以外のブラウザ (Netscape など) を使用している場合は、以下の興味深い効果の一部が表示されない可能性があります。このタグはコンテナ タグです。

1. マーキー タグのいくつかの重要な属性:

1.direction: スクロール方向（上、下、左、右の 4 つの値を含む）

説明: 上: 下から上にスクロールします。下: 上から下にスクロールします。左: 右から左にスクロールします。右: 左から右にスクロールします。

構文: <marquee direction="スクロール方向">...</marquee>

2.動作: スクロール モード (3 つの値: スクロール、スライド、交互)

説明: scroll: ループでスクロールします (デフォルトの効果)。 slide: 1 回スクロールして停止します。 alternate: 交互に前後にスクロールします。

構文: <marquee behavior="スクロール モード">...</marquee>

3.scrollamount: スクロール速度（スクロール速度は、スクロールするたびに移動する長さをピクセル単位で設定します）

構文: <marquee scrollamount="5">...</marquee>

4.scrolldelay: 2 回のスクロール間の遅延時間を設定します。値が大きすぎると、1 ステップ後に一時停止効果が発生します (スクロール時間間隔をミリ秒単位で設定します)

構文: <marquee scrolldelay="100">...</marquee>

5.loop: スクロールループの数を設定します（デフォルト値は -1 で、スクロールは連続的にループします）

構文: <marquee loop="2">...</marquee>

<marquee loop="-1" bgcolor="#CCCCCC">私は歩き続けます。 </マーキー>

<marquee loop="2" bgcolor="#CCCCCC">歩くのは2回だけ</marquee>

6.幅、高さ: スクロールする字幕の幅と高さを設定します

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

7.bgcolor: スクロールする字幕の背景色を設定します (カラー値、または rgb() または rgba() 関数を使用できます)

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

8.hspace、vspace: 空白スペース（マージン値の設定に相当）

説明: hspace: アクティブなサブタイトルの位置と親コンテナーの水平境界線の間の距離を設定します。たとえば、hspace="10" は次のようになります: margin: 0 10px;

vspace: アクティブなサブタイトルの位置と親コンテナーの垂直境界線の間の距離を設定します。たとえば、vspace="10" は次のようになります: margin: 10px 0;

構文: <marquee hspace="10" vspace="10">...</marquee> (marquee: 10px; と同等)

9.align: スクロールする字幕コンテンツの配置を設定します (9 つの値: absbottom、absmiddle、baseline、bottom、left、middle、right、texttop、top)

説明: absbottom: 絶対下揃え (g や p などの文字の下揃え)
absmiddle: 絶対中央揃え
ベースライン: ボトムラインの配置
bottom: 下揃え（デフォルト）
左: 左揃え
中央: 中央揃え
右: 右揃え
texttop: 上行の配置
上: 上揃え

構文: <marquee align="alignment">...</marquee>

10.face: スクロール字幕のフォントを設定する

構文: <marquee font="楷体_GB2312"></marquee>

11.color: スクロール字幕のテキスト色を設定する

構文: <marquee color="#333"></marquee>

12.size: スクロール字幕のフォントサイズを設定します

構文: <marquee size="3"></marquee>

13.STRONG: スクロールする字幕のテキストを太字にする

構文: <marquee STRONG></marquee>

2. marquee でよく使用される 2 つのイベント:

onMouseOut="this.start()" は、マウスが領域外に移動したときにスクロールを継続するように設定するために使用されます。
onMouseOver="this.stop()" は、マウスがこの領域に移動したときにスクロールを停止するために使用されます。

 <marquee onMouseOut="this.start()" onMouseOver="this.stop()">marquee でよく使用される 2 つのイベント</marquee>

完全なコードは次のとおりです。

 <marquee id="affiche" 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()">

<marquee> には多くのパラメータがありますが、複雑でカスタマイズされた特別なマーキー効果は結局実現できず、ブラウザの制限もあるため、ほとんどの場合、JavaScript を使用してマーキースクロール効果を実現します。

HTML の marquee タグを使用してシームレス スクロール マーキー効果を実現する方法については、これでこの記事は終了です。より関連性の高いマーキー シームレス スクロール マーキー コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。