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

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

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

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

推薦する

docker compose の記述ルールについての簡単な説明

この記事ではクラスタの展開に関連する内容は紹介しませんバージョン制約Docker エンジン >...

HTML&CSS&JS 互換性ツリー (IE、Firefox、Chrome)

Web デザインにおけるツリーとは何ですか?簡単に言うと、リンクをクリックするとサブディレクトリが展...

CSS画像結合技術(スプライト画像)の詳しい説明

CSS画像結合技術1. 画像のステッチ画像ステッチング技術は、個々の画像を収集する技術です。画像の多...

VueはExcelテーブルをインポートし、インポートに失敗したデータを自動的にダウンロードします。

次のような要件があります: インポート ボタン。ボタンをクリックして Excel テーブルをインポー...

CSS3はマスク連打機能を実現する

最近Bステーションでスマートアンチブロッキング弾幕と呼ばれる弾幕エフェクトを見ました。これは伝説のマ...

CentOS8.0 で FTP サーバーをインストールして設定する方法

CentOS8.0-1905 のリリース後、FTP サーバーを CentOS の新しいバージョンに移...

HTML ファイルにフラッシュ ビデオ形式 (flv、swf) ファイルを埋め込む方法

Flash ファイル形式: .FLV および .SWFフラッシュ ビデオ形式には、.flv と .s...

Vue は PDF ファイルのオンライン プレビューを実装します (pdf.js/iframe/embed を使用)

序文現在、私はコースウェア PPT のオンライン プレビューを必要とする高品質のコースに取り組んでい...

MySQL テーブルにおける非主キー列オーバーフロー監視の詳細な説明

今日もまた罠に落ちてしまいました。 私は以前MySQLの主キーオーバーフローに遭遇したことがあり、そ...

CentOS7 インストール Zabbix 4.0 チュートリアル (イラストとテキスト)

SeLinuxを無効にするsetenforce 0永久に閉店: vi /etc/selinux/c...

MySQL 8.0.18 インストール構成の最適化チュートリアル

MySQLのインストール、設定、最適化は参考用です。具体的な内容は次のとおりです。 MySQL ダウ...

iframeを透明にするパラメータ

<iframe src="./ads_top_tian.html" all...

DockerでPython環境をパッケージ化するプロセスの詳細な説明

docker パッケージング Python 環境の手順は次のとおりです。 1 pip listの下に...

MySQL PXC は IST 送信のみで新しいノードを構築します (推奨)

需要シナリオ: 既存の PXC 環境には大量のデータがあります。新しく購入したサーバーをこのクラスタ...