マーキー要素は、スクロールするフォントや画像などの効果を実装します。

マーキー要素は、スクロールするフォントや画像などの効果を実装します。
マーキー要素を使用すると、単純なフォント(画像など)のスライドやその他の効果を実現できます。

コードをコピー
コードは次のとおりです。

<スタイル タイプ="text/css">
#div01{
幅: 500ピクセル;
}
</スタイル>
<script type="text/javascript">
</スクリプト>
<marquee behavior="alertnate"><font size=30 color='red'>www.baidu.com111</font></marquee>
<marquee direction=right bgcolor='#ff2233' behavior="alertnate"><font size=30 color='blue'>www.baidu.com222</font></marquee>
<marquee id="m3" direction=down bgcolor='#dbdbdb' height=50px hspace=20px vspace=20px behavior="alertnate" scrollLeft=left onmouseover="this.stop()" onmouseout="this.start()"><font size=30 color='blue'>www.baidu333.com</font></marquee>
<marquee id="m4" direction=up bgcolor='#00dbdb' behavior="alertnate"><font size=30 color='blue'>www.baidu444.com</font></marquee>



<div id="div01"><marquee direction=right bgcolor='#ff2233' behavior="alertnate" scrolldelay=100><font size=30 color='blue'>www.baidu.com555</font></marquee></div>
<input type="button" onclick="m3.stop();" value="m3.stop"></input>
<input type="button" onclick="m3.start();" value="m3.start"></input>
<button onclick="m4.stop();">m4.stop</button>
<button onclick="m4.start();">m4.start</button>

方向はスクロール方向を示します。値は左、右、上、下のいずれかです。デフォルト値は左です。
動作はスクロール モードを示します。値は、scroll (連続スクロール)、slide (1 回スライド)、alternative (前後にスクロール) のいずれかになります。
loop はループの数を示します。値は正の整数で、デフォルトは無限ループです。
scrollamountは移動速度を示します。値は正の整数で、デフォルト値は6です。
scrolldelay は一時停止時間を示します。値は正の整数です。デフォルト値は 0 です。単位はミリ秒のようです。
align は要素の垂直方向の配置を示します。値は top、middle、bottom のいずれかです。デフォルト値は middle です。
bgcolor はモーション領域の背景色を示します。値は 16 進数の RGB カラーです。デフォルト値は白です。
高さと幅は、モーション領域の高さと幅を表します。値は正の整数 (ピクセル単位) またはパーセンテージです。デフォルトの幅は 100% です。高さは、タグ内の要素の高さです。
hspace と vspace は、要素から領域境界までの水平距離と垂直距離を表します。値はピクセル単位の正の整数です。
onmouseover=this.stop() onmouseout=this.start() は、マウスがその領域の上にあるときにスクロールが停止し、マウスがその領域から離れたときにスクロールが継続することを意味します。

以下はボタンをクリックしたときに m3 と m4 をスクロールまたは停止するための設定です。

コードをコピー
コードは次のとおりです。

<input type="button" onclick="m3.stop();" value="m3.stop"></input>
<input type="button" onclick="m3.start();" value="m3.start"></input>
<button onclick="m4.stop();">m4.stop</button>
<button onclick="m4.start();">m4.start</button>

<<:  mysql バックアップ戦略の実装 (フルバックアップ + 増分バックアップ)

>>:  海外でダウンロードできる25個の新鮮で便利なアイコンセット

推薦する

CSS+JS で水滴の波紋アニメーション ボタン効果を実装するサンプル コード

コードは次のようになります。 <!DOCTYPE html> <html lang...

Postman 自動インターフェーステストの実践

目次背景説明GETリクエストの作成事前リクエストスクリプトで署名を作成するスクリプトは環境変数に書き...

Django は Pillow を使用して検証コード機能を簡単に設定します (Python)

1. モジュールをインポートし、検証状態を定義する PIL から Image、ImageDraw、...

nginxサーバーのダウンロード、インストール、使用方法の詳細な説明

ダウンロードhttp://nginx.org/en/download.html解凍ダウンロードしたn...

MySQL InnoDB のロック機構の詳細な説明

前面に書かれたデータベースは本質的に共有リソースであるため、同時アクセスのパフォーマンスを最大化する...

Vue プロジェクトに ECharts を導入する

目次1. インストール2. はじめに3. 使用4. 必要に応じてEChartsチャートとコンポーネン...

Windows環境でのMySQL 8.0.13無料インストールバージョンの設定チュートリアル

目次圧縮ファイルをダウンロードするアドレス: https://dev.mysql.com/downl...

Linux 時間サブシステムの時間表現例の詳細な説明

序文Linux カーネルでは、元のコードとの互換性を保つため、または特定の仕様に準拠するため、また現...

CSSを使用してHTMLテキストボックス内のテキストの垂直方向の中央を制御する

Text の height 属性が定義されている場合、Text に入力されたテキストは垂直方向に中央...

MySQLデータベースの一般的な最適化操作のまとめ(経験共有)

序文データ中心のアプリケーションの場合、データベースの品質はプログラムのパフォーマンスに直接影響する...

MySql の集計関数に条件式を追加する方法

MySQL のフィルタリングのタイミングは、集計関数で使用される where 条件と having ...

CSS3 アドバンス LESS で星空アニメーションを実装するサンプルコード

この記事では、星空アニメーションを実現するための高度な CSS3 LESS のサンプルコードを次のよ...

HTMLテーブルではテーブルの外側の境界線のみが表示されます

質問があります。Dreamweaver で、3 行 1 列のログイン フォーム (ログイン、登録、パ...

Linux で AIDE に基づいてファイルシステムの整合性を検出する方法

1. 補助AIDE (Advanced Instruction Detection Environm...

Linux コマンドラインで電卓を使用する 5 つのコマンド

みなさんこんにちは。私は梁旭です。 Linux を使用するときに、計算を行う必要がある場合があり、そ...