ホームページ > 記事 > ウェブフロントエンド > HTML タグのマーキーがスクロール効果を実装するサンプル コード
HTML タグのマーキーがスクロール効果を実装するサンプル コード
- 高洛峰オリジナル
- 2017-03-20 16:58:021674ブラウズ
ページの自動スクロール効果は JavaScript によって実現できますが、今日私は偶然、JS コントロールなしでさまざまなスクロール効果を実現できる HTML タグ ed126914ed1419bab26abf7cf307b7b97204e33a7a23f6efcc788532e245c31b を発見しました。
マーキー マーカーを使用して、テキストだけでなく、画像、表なども移動します。
構文: ed126914ed1419bab26abf7cf307b7b9...7204e33a7a23f6efcc788532e245c31b; 説明: マーカー間にスクロールするコンテンツを追加します。
重要な属性:
1. スクロール方向の方向 (上、下、左、右の 4 つの値を含む)
構文: d4e49ca334fe8f3efe6a583e5623e421...7204e33a7a23f6efcc788532e245c31b
2. スクロール動作 (スクロール: 循環スクロール、デフォルト効果、スライド: 1 回スクロールして停止、代替: 前後に交互にスクロール)
構文: 8cb2b81fb4f51e5b27e7d206dd237ad9...45a63c0cbdea417a55578af308e1bf35...7204e33a7a23f6efcc788532e245c31b 4. スクロール遅延 (スクロール時間間隔をミリ秒単位で設定します)
構文: 34695e6898ccb333b28ad5f6efdc497f...7204e33a7a23f6efcc788532e245c31b
5. スクロールループループ (デフォルト値は -1 です) 、スクロールはループし続けます)
構文: 69457943bcb520c612032510d36031b7...7204e33a7a23f6efcc788532e245c31b
6. スクロール範囲の幅、高さ
7. スクロールの背景色 bgcolor
8. 空白スペース hspace、vspace
コード例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body> <div> <marquee direction="up" behavior="scroll" scrollamount="1" scrolldelay="0" loop="-1" width="1000" height="50" bgcolor="#0099FF" hspace="10" vspace="10"> 指整个Marquee对齐方式; (2)behavior:设置滚动的方式: scroll:表示由一端滚动到另一端,会重复,缺陷是不能无缝滚动。 slide:表示由一段滚动到另一端,不会重复... </marquee> </div> </body> </html>
以上がHTML タグのマーキーがスクロール効果を実装するサンプル コードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。