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 登録コード\アクティベーションコードの概要

推薦する

Zabbix を使用して ogg プロセスを監視する (Windows プラットフォーム)

この記事では、Windows プラットフォームで ogg プログラムを監視する方法を紹介します。 (...

複数サーバーの負荷分散を実現するためのNginx構成

Nginx ロード バランシング サーバー: IP: 192.168.0.4 (Nginx-Serv...

MySQL エラー コード 1064 の解決策

SQL ステートメント内の単語が mysql のキーワードと競合する場合は、`` (タブ キーの上)...

MySQL 5.7 の一時テーブルスペースを使用して落とし穴を回避する方法

導入MySQL 5.7 は、SSL/TLS と全体的なセキュリティ開発におけるいくつかの重要な変更に...

フィールドを結合するSQL関数

最近、関連テーブル内のすべてのフィールドをクエリし、それらを 1 つのフィールドに再グループ化する必...

MySql 5.6.35 winx64 インストール詳細チュートリアル

注: データベースのバージョンの問題により、プロジェクトの起動時にエラーは発生しませんでしたが、デー...

モバイルデバイスで 1 ピクセルの境界線の問題を解決するいくつかの方法 (5 つの方法)

この記事では、モバイルデバイス上の 1 ピクセルの境界線の問題を解決する 5 つの方法を紹介します。...

いくつかの一般的な CSS レイアウト (要約)

まとめこの記事では、次の一般的なレイアウトを紹介します。 3 列レイアウトを実装する方法は多数ありま...

mysql: [エラー] 不明なオプション '--skip-grant-tables'

MySQL データベースがエラー 1045 (28000): ユーザー 'ODBC'...

JavaScript で配列遅延評価ライブラリを実装する方法

目次概要達成方法具体的な実装評価関数の終了を決定する生成関数の範囲変換関数マップフィルター割り込み機...

SQL実行ステップの詳細な分析

SQL実行ステップの詳細な分析まず、ステートメントが実行される順序を見てみましょう。 (8)選択する...

Docker ベースの Etcd 分散デプロイメントの方法と手順

1. 環境整備1.1 基本環境NTP設定: 省略 #時間の一貫性を確保するためにNTPサービスを設定...

CSS3で実装された炎のアニメーション

成果を達成する実装コードhtml <div class="コンテナ">...

Portainer を使用した Docker コンテナのデプロイのプロジェクト実践

目次1. 背景2. 操作手順3. Portinerをインストールする3.1 Dockerのデプロイメ...

JSの基本概念の詳細な紹介

目次1. JSの特徴1.1 マルチパラダイム1.2 説明1.3 シングルスレッド1.4 ノンブロッキ...