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

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

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

<スタイル タイプ="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個の新鮮で便利なアイコンセット

推薦する

HTML ファイルにファイルの内容を含める方法の概要

フォーラムでは、ネットユーザーから「HTML ファイル内の別の HTML ファイルの内容を読み取るこ...

Linux での Redis の永続性、マスター スレーブ同期、Sentinel の詳細な説明

1.0 Redis の永続性Redis はメモリ内データベースです。サーバー プロセスが終了すると、...

CSS3は子供のころの紙飛行機を実現する

今日は折り紙飛行機(飛べる飛行機)を作ります基本的にすべてCSSで実装されており、JSはごく一部に過...

Web ページは何ピクセルで設計すればよいでしょうか?

多くのウェブデザイナーは、ウェブページのレイアウトを設計する際に、インターフェースウェブページの幅に...

CSS3 で作成したホバーズーム効果

結果:実装コード: html <link href='https://fonts.go...

Vueは視覚的なドラッグページエディタを実装します

目次ドラッグアンドドロップの実装ドラッグイベントドラッグして開始リリースゾーンでの移動境界処理、角度...

マークアップ言語 - 簡略化されたタグ

123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...

CSS3セレクターの新機能の実装

目次基本的なセレクタ拡張属性セレクタ疑似クラスと疑似要素セレクター基本的なセレクタ拡張1. 子要素セ...

Nginx ベースの Mencached キャッシュ構成の詳細な説明

導入Memcached は分散キャッシュ システムです。Memcached には認証とセキュリティ制...

tdが空の場合に境界線を表示する方法

以前、CSS を使用してテーブルの border + bordercolordark + borde...

Dockerカスタムネットワークの詳細な紹介

目次Dockerカスタムネットワーク1. カスタムネットワークの紹介2. カスタムネットワークを作成...

Vueのウェブページスクリーンショット機能の詳しい説明

最近、プロジェクトで写真をアップロードする要件があるのですが、顧客がアップロードする写真のサイズがま...

MySQLデータベースのストアドプロシージャとトランザクションの違い

トランザクションは、複数の SQL ステートメントの原子性、つまり、それらが一緒に完了するか、一緒に...

Nginx キャッシュ設定例

Web アプリケーションの開発とデバッグを行う際には、テストのためにブラウザのキャッシュをクリアした...

Reactでファイルパスエイリアスを素早く設定する方法

React は、ユーザー インターフェイスを構築するための JavaScript ライブラリです。F...