HTMLのmarquee属性でテキストを踊らせる

HTMLのmarquee属性でテキストを踊らせる
構文: <marquee> …</marquee>

モバイル属性マーキーを使用すると、テキストをダンスさせるだけでなく、画像や表などにも適用できます。

<marquee direction=left>Kexun Youth Learning Channel へようこそ! </マーキー>

direction=left、方向を示します。上記のテキスト効果は「Kexun Youth Learning Channel へようこそ!」で、右から左に動いています。さらに、方向には右、上、下があります。

方向の他に、他の制限要素を追加できます。

移動方法:

ループ動作: loop = n (n は回数を示します) 円を描くように移動する: behavior = scroll 一度だけ移動する: behavior = slide 前後に移動する: behavior = alternate

外観:

フォント サイズ: <font size=n> (n、変数) 配置: align=top/middle/bottom 背景色: bgcolor=Blue (定義済みの色、例: 黒、オリーブ、ティール、赤、青、栗色、紺、灰色、ライム、フクシア、白、緑、紫、銀、黄色、水色、または 16 進数)

他の:

速度: scrollmount=n(n, 変数) 遅延: scrolldelay==n(n, 変数)

<marquee direction="移動方向" height="移動領域の高さ" width="移動領域の幅" scrollamount="移動速度" onmouseover=this.stop() onmouseout=this.start()>"

onmouseoverは、マウスが移動領域に置かれたときにマウスの動きを一時停止するように設定します。

onmouseout マウスが離れたときにスクロールを続ける

マーキーコードを使用してテキストと画像のスクロールを実装する

今日はTAPでテキストをスクロールする設定を見ました!以前はサポートされていなかったようです。たぶん使ってないです!ハハハ、効果を見せてあげましょう!

以下はTAPのスクロールテキスト掲示板のコードの説明です。

マーキーパラメータ:
BGColor: スクロール テキスト ボックスの背景色。
方向: スクロール方向の設定。左、右、上、下を選択できます。
scrolldelay: 各スクロール間の遅延時間。値が大きいほど、スクロールが遅くなります。
scrollamount: 1 回のスクロールにかかる合計時間。数値が小さいほど、スクロールが遅くなります。
動作: スクロール モードが設定されます。可能な値は、スクロール (円形スクロール)、スライド (単一スクロール)、交互 (前後スクロール) の 3 つです。
配置: テキストの配置設定。中間、下、上を選択できます。
幅: スクロール可能なテキスト ボックスの幅。値を入力し、その後ろのラジオ ボタンからピクセルまたはパーセントを選択します。
高さ: スクロール テキスト ボックスの高さ。値を入力し、その後ろのラジオ ボタンからピクセルまたはパーセントを選択します。
loop: スクロールする回数。デフォルトは無限です
hspace、vspace: 前後および上下の空白行。

以下のデモは私の掲示板のデモです。右下隅で効果を確認できます。気に入って頂ければ!コードをコピーして上記のコードに置き換えて効果を確認してください。

効果1: テキストが上にスクロールする


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

<marquee direction="up" loop="-1" scrollamount="4">
<div align="left">
</div><center>
<font color="#008000"></font></center><div align="left">
</div><center><p><font color="#ff6600">サイトのお知らせ</font></p>
<p><font color="#ff4500">Xiaojun Resources へようこそ</font></p>
<p><font color="#ff4500">ここでは最新の無料リソースと情報を共有します。</font></p>
<p><font color="#ff4500">気に入っていただければ幸いです。あなたのサポートが私の最大のモチベーションです!</font></p>
<p><font color="#ff4500">何かご提案がありましたら、ぜひお知らせください。 </font></p>
<p><font color="#ff4500">このサイトのリソースはインターネットからのものであり、あなたの権利を侵害している場合はご遠慮ください。 </font></p>
<p><font color="#ff4500"></font></p>
<font color="#ff4500"><p><font color="#ff3300">応援ありがとうございます。あなたのおかげで小君は素晴らしいです</font>

</p></font></center><font color="#ff4500"></font></marquee>

効果2: テキストが左にスクロールする

<marquee direction="left" loop="-1">[お知らせ] 一部のチュートリアルは Tap Knows オリジナルです。転載の際は出典を明記してください。 </マーキー>

画像スクロールコード:


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

<marquee direction="lift" loop="-1" scrollamount="20" width="500" height="210">
<a href="http://jun51.tap.cn/" target="_blank"><img 高さ="200" 幅="300" src="upload/2022/web/CC6169D8EE67719C4299B0740123325E.jpg"/><img 高さ="200" 幅="300" src="upload/2022/web/EB965C39B9A8B63AE3908267DD6C45C8.jpg"/><img 高さ="200" 幅="300" src="upload/2022/web/676E5C63EA319EEABCCB6D03C19121D4.jpg"/>
</マーキー>

好きなだけ加えてください!しかし、閲覧表示には多少の効果があるようです! Google を使うことをお勧めします。とても便利です!

<<:  親要素を基準にCSSの位置を絶対的に設定する方法についての簡単な説明

>>:  MySql 学習ノートにおけるトランザクション分離レベルの詳細な説明

推薦する

MySQL マスターとスレーブの不整合とその解決策の詳細な説明

1. MySQL マスタースレーブ非同期1.1 ネットワーク遅延MySQLのマスタースレーブレプリケ...

html 内の絶対パス URL と相対パス URL、サブディレクトリ、親ディレクトリ、ルート ディレクトリ

絶対 URL は、インターネット上の特定のファイルに必要なすべてのコンテンツを表すために使用されます...

MySQL における in と exists の使い方と違いの紹介

まずコードを書いて (int i=0;i<1000;i++){ (int j=0;j<5...

Vue要素のバックグラウンド認証プロセスの分析

序文:最近、プロジェクトで管理システムに遭遇しました。権限設定が非常に興味深いと思いました。自分の学...

MySQLにおける静的変数の役割の詳細な説明

MySQLにおける静的変数の役割の詳細な説明静的変数の使用 静的変数サンプルコード: 関数テスト()...

MySQLでレコードを変更する場合、更新操作フィールド = フィールド + 文字列

シナリオによっては、varchar 型のフィールドを変更する必要があり、変更の結果は 2 つのフィー...

Angularルーティングアニメーションと高度なアニメーション機能の詳細な説明

目次1. ルーティングアニメーション2. グループクエリとスタガー1. ルーティングアニメーションル...

Centos7.3 で mysql5.7.18 をインストールして初期パスワードを変更する方法

この記事では、Centos7.3でのmysql5.7.18のインストールと初期パスワードの変更につい...

経験豊富な人が、プロフェッショナルで標準化されたMySQL起動スクリプトの開発方法を紹介します。

シェル スクリプト言語は、すべてのプログラミング言語の中で最も単純な言語であるため、資格のある Li...

Web デザイン スキル: iframe の適応高さの問題

おそらく、この問題にまだ遭遇していない人もいるでしょうから、まずは適応高さとは何かを説明しましょう。...

Vueベースのカスタムコンポーネントを実装してアイコンを導入する

序文プロジェクト開発では、アイコンを使用する方法はたくさんあります。iconfont で適切なアイコ...

HTML/CSS の基礎 - HTML コード記述におけるいくつかの注意事項 (必読)

この記事の警告事項は、ブラウザの互換性とはまったく関係ありません。主に、プロジェクトで遭遇したいくつ...

JavaScriptでシンプルなスクロールウィンドウを実装する

この記事では、スクロールウィンドウを実装するためのJavaScriptの具体的なコードを参考までに紹...

MySQL でサーバーのインストールを開始できない場合の解決策について簡単に説明します。

コンピュータに初めて MySQL をインストールする場合、通常このエラー メッセージは表示されません...