HTML タグのマーキーがスクロール効果を実装するサンプルコード-htmlチュートリアル-php.cn

HTML タグのマーキーがスクロール効果を実装するサンプルコード

高洛峰

リリース： 2017-03-20 16:58:02

オリジナル

1749 人が閲覧しました

ページの自動スクロール効果は JavaScript によって実現できますが、今日私は偶然、JS コントロールなしでさまざまなスクロール効果を実現できる HTML タグを発見しました。

マーキーマーカーを使用して、テキストだけでなく、画像、表なども移動します。

構文: ...; 説明: マーカー間にスクロールするコンテンツを追加します。

重要な属性:

1. スクロール方向の方向 (上、下、左、右の 4 つの値を含む)

構文: ...

2. スクロール動作 (スクロール: 循環スクロール、デフォルト効果、スライド: 1 回スクロールして停止、代替: 前後に交互にスクロール)

構文: ...< ;
3. スクロール速度scrollamount (スクロール速度は、スクロールするたびに移動する長さをピクセル単位で設定します)
構文: ...
4. スクロール遅延 (スクロール時間間隔をミリ秒単位で設定します)

構文: ...

5. スクロールループループ (デフォルト値は -1 です) 、スクロールはループし続けます)

構文: ...

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 サイトの他の関連記事を参照してください。