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

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

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

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

推薦する

ネイティブJavaScriptでカルーセルを実装する

この記事では、JavaScriptでカルーセルを実装するための具体的なコードを参考までに紹介します。...

JavaScriptの構文とコード構造に関する深い理解

目次概要機能性と読みやすさ空白括弧セミコロンインデント身元大文字と小文字を区別予約キーワード概要すべ...

CSS を使用してマウスをホバーすることで他のタグのスタイルを変更するサンプルコード

序文:私の知る限り、現在 CSS で制御できるのは、タグをホバーしたときにそのタグの下の兄弟タグとサ...

一目でわかる$nextTickの説明

目次1. 機能説明2. 親コンポーネント3. サブコンポーネント NextTick.vue 4なぜ未...

Element-UIの10の驚くべきトリックのまとめ

目次el-scrollbar スクロールバーel-uploadはクリックをシミュレートしますel-s...

MySQL でのワイルドカードを使用したファジークエリの実装に関する簡単な説明

MySQL データベースでは、あいまいクエリが必要な場合にワイルドカードを使用します。まず、演算子と...

TS 数値区切り文字とより厳密なクラス属性チェックの詳細な説明

目次概要演算子の改良と正確なinstanceofよりスマートなオブジェクトリテラル推論固有のシンボル...

VueはBaidu Mapsを使用して都市の位置特定を実現

この記事では、参考までに、Baidu Mapsを使用して都市の位置特定を実現するVueの具体的なコー...

自動ロック画面機能を実現するjs

1. 使用シナリオこのような要件があるため、システムが開発されました。ユーザーがデスクトップを離れ...

CSS でマウスの位置をマッピングし、マウスを動かしてページ要素を制御する (サンプル コード)

マウスの位置をマッピングしたり、ドラッグ効果を実装したりすることは、 JavaScriptで行うこと...

MySQLデータベースを別のマシンに移行する方法の詳細な説明

1. まず、移行サーバー上のデータ ファイルを見つけます。MySQL 5.7 とデフォルトのインスト...

Apache ソースコードのインストールと仮想ホストの設定に関する詳細なチュートリアル

ソースからApacheをインストールする1. Apacheソースコードをアップロードして必要なソフト...

WeChatアプレットは写真の撮影とアルバムからの写真の選択を実現します

この記事では、WeChatアプレットで写真を撮ったり、アルバムから写真を選択したりするための具体的な...

Mac で MySQL バージョン 5.6 のパスワードを設定する方法

MySQLはインストール時に設定できますが、それより低いバージョンは設定できないようで、インストール...

Vue はトークンの有効期限が切れると自動的にログインページにジャンプする機能を実装します

このプロジェクトは最近テストされ、テスターから、トークンの有効期限が切れたため、ルートが自動的にログ...