HTML タグ マーキーを使用してスクロール効果を実現する簡単な方法 (必読)

HTML タグ マーキーを使用してスクロール効果を実現する簡単な方法 (必読)

ページの自動スクロール効果は JavaScript で実現できますが、今日偶然、JS 制御なしでさまざまなスクロール効果を実現できる HTML タグ <marquee></marquee> を発見しました。

marquee タグは、テキストだけでなく、画像や表なども移動するために使用できます。

構文: <marquee>...</marquee>; 説明: タグ間にスクロールするコンテンツを追加します。

重要なプロパティ:

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

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

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

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

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

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

4. スクロール遅延 scrolldelay (スクロール時間間隔をミリ秒単位で設定)

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

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

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

6. スクロール範囲の幅、高さ

7. スクロール背景色 bgcolor

8. 空白スペース hspace、vspace

コード例:

XML/HTML コードコンテンツをクリップボードにコピー
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >   
  2. < html   xmlns = "http://www.w3.org/1999/xhtml" >   
  3. <ヘッド>   
  4. <メタ  http-equiv = "コンテンツタイプ"  コンテンツ= "text/html; 文字セット = utf-8"   />   
  5. < title >無題の文書</ title >   
  6. </ヘッド>   
  7.   
  8. <本文>   
  9. <div>   
  10. <マーキー 方向= "上"  動作= "スクロール"  スクロール量= "1"  スクロール遅延= "0"  ループ= "-1"  = "1000"  高さ= "50"  背景色= "#0099FF"  縦スペース= "10"  縦スペース= "10" >   
  11. マーキー全体の配置を指します。(2)動作:スクロール方法を設定します。スクロール:端から端までスクロールすることを意味し、繰り返しますが、シームレスにスクロールできないという欠点があります。スライド: 繰り返しせずに端から端までスクロールすることを意味します...
  12. </マーキー>   
  13. </div>   
  14. </本文>   
  15. </html>   

以上が、HTMLタグマーキーを使用してスクロール効果を実現する簡単な方法(必読)の内容です。気に入っていただければ幸いです。

<<:  テーブル内の要素のドラッグと並べ替えの問題について簡単に説明します

>>:  MySQL 8.0 でリモートアクセス権限を設定する方法

推薦する

Vue3 での Teleport の使用に関する詳細な説明

目次テレポートの目的テレポートの仕組みこの記事では、以下の内容を取り上げます。テレポートの目的テレポ...

jQueryは、マウスをドラッグしてdivの位置とサイズを変更する方法を実装しています。

Windows フォームと同様の効果を得るには、中央をドラッグして div の位置を変更し、端をド...

Tomcat クラスローダーの実装方法とサンプルコード

Tomcat は内部的に複数の ClassLoader を定義し、アプリケーションとコンテナーが異な...

中国の専門ではない:文化の違いの中でのウェブ開発

Web デザインと開発は大変な作業なので、少数の人だけを対象に設計しないでください。これは外国人が...

Docker データボリュームの一般的な操作コードの例

開発者が Dockerfile を使用してイメージをビルドする場合は、イメージをビルドするときにデー...

MySQLデータベースホスト127.0.0.1とlocalhostの違い

私の友人の多くは、127.0.0.1 と localhost の違いがわからず、問題に遭遇するかもし...

Vue elementUI はツリー構造テーブルと遅延読み込みを実装します

目次1. 成果を達成する2. バックエンドの実装2.1 エンティティクラス2.2 データベース内のデ...

MySql バッチに挿入するときにデータの重複を避ける方法

目次序文1. ignore を挿入2. 重複キーの更新時3. を置き換える要約する序文Mysql は...

TypeScript 2.0 マーク付き共用体型の詳細な説明

目次タグ付きユニオン型を使用した支払い方法の構築タグ付きユニオン型を使用した Redux アクション...

Vue で HTML 5 ドラッグ アンド ドロップ API を使用する方法

ドラッグ アンド ドロップ API は、ドラッグ可能な要素を HTML に追加し、ドラッグ可能な豊富...

カスタム変数を使用した MySQL クエリの最適化

目次並べ替えクエリの最適化変更されたばかりのデータ行を繰り返し取得しないようにする遅延ロードされた結...

JSは10進数を16進数に変換するサンプルコードを実装します

序文コードを書くと、時々基数変換の問題に遭遇します。一般的な変換には、2進数、8進数、10進数、16...

Mac MySQL のルートパスワードをリセットするチュートリアル

免責事項:このパスワード リセット方法は、Homebrew によってインストールされた MySQL ...

フロントエンド JavaScript ハウスキーパー package.json

目次1. 必須属性1. 名前2. バージョン2. 説明情報1. 説明2. キーワード3. 著者4. ...

HTMLテーブルレイアウトの実践的な使い方の詳しい説明

テーブルはいつ使用されますか?最近では、Web ページの全体的なレイアウトにテーブルが使用されること...