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

推薦する

Linux xargsコマンドの使用

1. 機能: xargs は、stdin 内のスペースまたは改行で区切られたデータをスペースで区切ら...

@media レスポンシブ CSS を使用してさまざまな画面に適応する例

定義と使用@media クエリを使用すると、さまざまなメディア タイプに異なるスタイルを定義できます...

WeChatアプレットはシンプルな計算機を実装する

WeChatアプレットの簡単な計算機は参考用です。具体的な内容は次のとおりです。 1. はじめに1....

nginx ログを elasticsearch にインポートする方法の例

nginx ログは filebeat によって収集され、logstash に渡され、logstash...

CentOS 7 で grub パスワードと単一ユーザー ログインを設定するサンプル コード

Centos7 と Centos6 では、GRUB パスワードの設定手順に大きな違いがあります。これ...

vscode で Prettier Code プラグインを使用する詳細なチュートリアル

なぜprettierを使うのですか?大企業では、フロントエンド開発コードに独自のコード標準がある場合...

CSSはラジオをクリックして2つの画像スタイルを切り替えますが、複数のラジオのうち1つだけをチェックできます。

クリックされたボタンには赤い画像スタイルを実装し、選択されていない他のボタンには灰色の画像スタイルを...

ネイティブ JavaScript を使用した Web 計算機の実装

この記事では、参考までに、計算機のWebバージョンを実装するためのJavaScriptの具体的なコー...

Docker を使用した Redis マスタースレーブレプリケーションの実践の詳細説明

目次1. 背景2. 操作手順3. Dockerをインストールする4. 主なサービス構成5. サービス...

MySQLの誤操作後にbinlog2sqlを使用して素早くロールバックする方法の詳細な説明

序文日常の仕事や勉強では、データベースを操作するときに「不注意」によるミスを犯すことは避けられません...

iOS、Android、ミニプログラムアプリの敷居の低い開発のためのフロントエンドフレームワークを詳しく解説

現在、クロスプラットフォーム開発技術はもはや新しい話題ではありません。市場にはいくつかのオープンソー...

ES6 クラス継承を使用してゴージャスなボール効果を実現する方法

目次導入実装手順キャンバス環境を作成するライティングボールBallクラスを継承するMoveBallク...

ブラウザのキャッシュを防ぐために、js または css の後に ?v= バージョン番号を追加します。

コードをコピーコードは次のとおりです。 <span style="font-size...

HTML チェックボックスとラジオボタンスタイルの美化の簡単な例

HTML チェックボックスとラジオボタンスタイルの美化の簡単な例チェックボックス: XML/HTML...

HTML+CSS+JavaScript でガールフレンド版のスクラッチ カードを作成します (一度見ればすぐに覚えられます)

誰もがスクラッチ チケットで遊んだことがあると思います。子供の頃、ポケットにお金が入るとすぐに友達に...