HTML タグ マーキーはさまざまなスクロール効果を実現します (JS 制御なし)

HTML タグ マーキーはさまざまなスクロール効果を実現します (JS 制御なし)

ページの自動スクロール効果は 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

JavaScriptコードコンテンツをクリップボードにコピー
  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. <meta http-equiv= "コンテンツタイプ" content= "text/html; charset=utf-8" />
  5. <title>無題のドキュメント</title>
  6. </head>
  7. <本文>
  8. <div>
  9. <marquee direction= "up" behavior= "scroll" scrollamount= "1" scrolldelay= "0" loop= "-1" width= "1000" height= "50" bgcolor= "#0099FF" hspace= "10" vspace= "10" >
  10. マーキー全体の配置を指します。(2)動作:スクロール方法を設定します。スクロール:端から端までスクロールすることを意味し、繰り返しますが、シームレスにスクロールできないという欠点があります。スライド: 繰り返しせずに端から端までスクロールすることを意味します...
  11. </マーキー>
  12. </div>
  13. </本文>
  14. </html>

<<:  jsネイティブウォーターフォールフロープラグイン制作

>>:  Navicat for MySQL 11 登録コード\アクティベーションコードの概要

推薦する

MySQL Community Server 5.7.19 インストール ガイド (詳細)

MySQL公式サイトのzipファイルのダウンロードリンク https://dev.mysql.co...

HTML での Li タグの使用例

タイトルを左に、日付を右に揃えたいのですが、日付の範囲に float:right を直接追加すると、...

カルーセル効果を実現するjQueryプラグイン

毎日jQueryプラグイン - カルーセルチャートを実装するためのjQueryプラグイン。参考までに...

mysql スケジュールタスク (イベント イベント) の詳細な説明

1. イベントの簡単な紹介イベントは、MySQL が特定の時間に呼び出す手続き型データベース オブジ...

React Native APPのアップデートに関する簡単な説明

目次アプリ更新プロセス大まかなフローチャートアプリ情報の更新1. まず取得する必要があるファイルアド...

Webフロントエンドの一般的な操作(JS/HTML/CSSなどの知識を含む)

ul liの前のアイコン1をキャンセルしますクリア値1値を1に設定ラベル中央値1をクリアラベルの中央...

高品質なJavaScriptコードの書き方

目次1. 読みやすいコード1. 統一コード形式2. マジックナンバーを削除する3. 単一機能原則2....

バッチモードでtopコマンドを実行する方法

top コマンドは、Linux システムのパフォーマンスを監視するために誰もが使用している最適なコマ...

CSS のインライン スタイルに変換するソリューション (css-inline)

シーンについて話すメールを送信サードパーティのウェブサイトにHTMLを埋め込む他の編集者の記事をコピ...

Ubuntu Server でのワイヤレス ネットワーク カードの詳細な設定

1. ワイヤレス ネットワーク カードを挿入し、コマンドiwconfigを使用してワイヤレス ネット...

サイバーパンクスタイルのボタンを実現するためのHTML+CSS

まず効果を見てみましょう: 序文:このアイデアは、Bilibili のアップロード者 Steven ...

ウェブデザイナーが注意すべき 43 のウェブデザインの間違い

これはウェブサイトのユーザビリティに関する記事です。著者は自身の経験に基づいて、ウェブサイトのデザイ...

ハイパーリンクの幅と高さを直接設定できない問題の解決策

幅と高さを直接使用することはできません。 display:block; または display:in...

検索ボックスと検索ボタンの境界線が重なり合わない問題を解決

今日、Baiduのページで練習していたところ、検索ボックスとボタンの余白とパディングの値が0に設定さ...

MySQL 8.0 のメモリ消費の詳細な分析

目次1. innodb_buffer_pool_size 2. innodb_log_buffer_...