HTML5でテキストスクロール効果を実現する方法

この記事では、HTML5 でテキストのスクロール効果を実現する方法を紹介します。困っている友人が参考になれば幸いです。

HTML5 はテキスト スクロール効果を実装します

<div class="custom-notice">
   <i class="icon-notice"></i>
   <marquee class="noticeText ng-binding" direction="left" behavior="alternate" scrollamount="100" scrolldelay="1000" loop="5" width="100%" onmouseover="this.stop();" onmouseout="this.start();"  style="width: 100%;">充值公告：首充100送1元</marquee>
</div>

1. スクロール方向属性の方向

この属性のスクロール方向は、上 (テキストが上)、下 (テキストが下)、左 (テキストが左)、右 (テキストが右) の 4 つの値に設定できます。

2. スクロール モード属性の動作

この属性の値には 3 つの値があります: スクロール (循環スクロール、デフォルト効果)、スライド (1 回だけスクロールしてから停止) )、alternate (交互に前後にスクロール)

3. スクロール速度属性scrollamount

この属性は、テキストのスクロール速度を調整できます。実際には、スクロールするテキストの各動きの長さ (ピクセル単位) によって設定されます。値にpx単位を含まない数値のみが含まれる場合、設定は無効になります。

4. スクロール遅延属性scrolllay

この属性は、テキストをスクロールする時間間隔 (2 つのスクロール ステップ間の時間間隔) を設定するために使用されます。

scrolllay の時間間隔の単位はミリ秒で、値は数値のみを書き込みます

5. スクロールループ属性のループ

スクロールの設定後テキストの場合、デフォルトは「ループは無限に続きます」になります。ループの数を制御したい場合は、このプロパティを設定できます。

6. スクロール範囲属性 width&height

テキストのスクロール範囲を制御したい場合は、ピクセル単位で記述せずに、これら 2 つの属性をピクセル単位で使用できます。デフォルトでは、左右のスクロールの幅はブラウザ ウィンドウの幅と同じで、高さはテキストの高さと同じです。上下の高さはブラウザ ウィンドウの高さの 3 分の 1 です。

7. スクロール背景色属性 bgcolor

この属性は、スクロール領域の背景色を設定します (値は 16 進数のカラー コードと英語)。

8. スクロールスペース属性 hspace&vs​​pace

hsapce 属性はスクロール範囲の水平位置を設定でき、vspace はスクロール範囲の垂直位置を設定します。単位はすべてピクセルであり、値を書き込むときに単位 px は書き込まれません。

プログラミング関連の知識について詳しくは、プログラミング入門をご覧ください。 ！