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 でリモートアクセス権限を設定する方法

推薦する

MySQL InnoDB ストレージエンジンのメモリ管理の詳細な説明

目次ストレージエンジンのメモリ管理データ ページを LRU キューの先頭に置かないのはなぜですか?ダ...

Windows 環境での MYSQL5.7 設定ファイルの場所のグラフィカル分析

1. MYSQLインストールディレクトリ次のようにコードをコピーします。 select @@bas...

CentOS 7.4 64 ビット版に MySQL 8.0 をインストールして設定するための詳細な手順

ステップ1: MySQL YUMソースを取得するMySQLの公式サイトにアクセスして、RPMパッケー...

MySQL 権限昇格のさまざまな形態の概要

目次1. Webshel​​lを書く出力ファイルにシェルを書き込むログファイル書き込みシェル2. U...

ウェブページ制作でウェブフォントファイルにベクターアイコンを追加する方法

ご存知のとおり、コンピューターには 2 種類の画像があり、1 つはビットマップ、もう 1 つはベクタ...

Linux NFSメカニズムの動作原理と例の分析

NFS とは何ですか?ネットワークファイルシステムネットワーク上でファイルを保存および整理するための...

テキストエリアの使用に関する注意事項

なぜテキストエリアについて具体的に言及するのでしょうか?なぜなら、textarea ノードは実際には...

MySQL INT型の完全な分析

序文: Integer は MySQL で最もよく使用されるフィールド型の 1 つで、通常は整数を格...

Dockerイメージのローカル移行の実装

最近 Docker を勉強しているのですが、よく問題に遭遇します。Docker イメージをダウンロー...

CSS3 のカラー値 RGBA とグラデーションカラーの使用方法の紹介

CSS3以前は、グラデーション画像は背景画像としてのみ使用できました。 CSS3 のグラデーション構...

MySQLクエリステートメントの簡単な操作例

この記事では、例を使用して、MySQL クエリ ステートメントの簡単な操作を説明します。ご参考までに...

nginxリバースプロキシwebSocket設定の詳細な説明

最近、プロジェクトで作業しているときに webSocket プロトコルを使用し、WeChat アプレ...

Vue3 ドラッグ可能な左パネルと右パネルの分割コンポーネントの実装

目次コンポーネントの分解左パネル右パネル入力パラメータの分解小道具スロット具体的な実装ドラッグする方...

mysqlはタイムゾーン関連の問題を解決します

序文: MySQL を使用すると、時間の表示が正しくない、タイムゾーンが GMT+8 ゾーンにない、...

CSS変数を使用してダークモードを実装するためのサンプルコード

最近、WeChatはAppleによってダークモードの開発を強制されました。ますます多くのウェブサイト...