HTMlのシームレススクロールマーキー効果

marquee>タグは一対のタグで、最初のタグ <marquee> と最後のタグ </marquee> の間のコンテンツがスクロールするコンテンツです。marquee>タグの主な属性は、behavior, bgcolor, direction, width, height, hspace, vspace, loop, scrollamount, scrolldelayなどですが、いずれも省略可能です。

今日、WeChatで抽選をするとき、すべてのユーザーの抽選記録をシームレスにスクロールさせたかったのですが、私のjsスキルはとても悪く、その方法を思いつきませんでした。しかし、うっかりhtmlタグ - <marquee></marquee> を見つけると、jsの制御なしに、様々なスクロール効果を実現することができます。marqueeタグを使うと、テキストだけでなく、画像やテーブルなどもスクロールさせることができ、しかも簡単で高速なので、本当に時間の節約になりました。

marqueeタグはHTML3.2の一部ではなく、MSIE3以降にしか対応していないので、IE以外のブラウザ（Netscapeなど）を使っている場合は、以下の面白い効果が見られないかもしれません、このタグはコンテナタグなんです。

I. marqueeタグのいくつかの重要な属性。

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

説明: up: 下から上へスクロール、down: 上から下へスクロール、left: 右から左へスクロール、right: 左から右へスクロール。

構文：<marquee direction="scroll direction">... </marquee>

2. 動作：スクロールモード（3つの値：スクロール、スライド、オルタネートを含む）。

説明: スクロール：循環的にスクロールする、デフォルトの効果、スライド：一度だけスクロールした後に停止する、代替：前後に交互にスクロールする。

<ブロッククオート

構文：<marquee behavior="scrolling method">... </marquee>

3. scrollamount: スクロール速度（スクロール速度は、スクロールごとに移動するように設定されたピクセル単位の長さです。）

<ブロッククオート

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

4. scrolldelay: スクロール間の遅延時間を設定、値を大きくすると1ステップごとに一時停止する効果があります（スクロールの間隔をミリ秒で設定します）

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

5. loop: スクロールのループ回数を設定 (デフォルトは -1, スクロールはループし続ける)

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

<marquee loop="-1" bgcolor="#CCCCCC"> 続けますよ </marquee>

<marquee loop="2" bgcolor="#CCCCCC">I'll only go twice oh</marquee>.まで。

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

<ブロッククオート

構文： <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> （同等： margin: 10px; と同じです。）

9. align: スクロールするキャプションコンテンツの配置を設定する（9つの値を含む： absbottom, absmiddle, baseline, bottom, left, middle, right, texttop, top)

説明: absbottom：絶対底揃え（g、pなどで最下位に揃える）。
absmiddle: 中央の絶対配置
[...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...]