htmlのmarquee属性でテキストを踊らせる
2022-01-16 17:33:09
構文: <marquee> ...</marquee>
移動属性マーキーを使って、テキストの周りを踊るだけでなく、画像やテーブルなどにも適用することができます。
<marquee direction=left> KXYラーニングチャンネルへようこそ! </marquee>
direction=leftで方向を指定します。上のテキスト効果は "KXYラーニングチャンネルへようこそ!" 右から左へ移動!です。また、方向は右、上、下です。
方向以外にも、制限された要素を追加することができます。
移動する方法
ループで移動:loop=n (n, 回数分) 円形に移動:動作=scroll 1回だけ移動:動作=slide 前後に移動:動作=alternate
外観
フォントサイズ: <font size=n> (n、可変) アライン: align=top/middle/bottom ベースカラー: bgcolor=Blue(以下のような定義済みの色。ブラック、オリーブ、ティール、レッド、ブルー、マルーン、ネイビー、グレイ、ライム。フクシア、ホワイト、グリーン、パープル、シルバー、イエロー、アクア、または16進数)
その他
速度:scrollamount=n(n,変数) 遅延:scrolldelay==n(n,変数)
<marquee direction="移動する方向" height="移動領域の高さ" width="移動領域の幅" scrollamount="move speed" onmouseover= this.stop() onmouseout=this.start()> "
onmouseover マウスが移動領域の上に乗ったときに、移動を一時停止するように設定する
onmouseout マウスが離れたときにスクロールを継続する
マーキーコードでテキストや画像をスクロールさせる
TAP knowのスクロールテキストの設定は、今日そこで見ましたよ。以前は対応すらしていなかったもののようです。もしかしたら、使っていないかもしれません
以下は、TAPからテキスト掲示板を上下にスクロールさせるコードの説明です。
marquee パラメータ。
BGColor: スクロールするテキストボックスの背景色です。
Direction:スクロールの方向で、左、右、上、下を選択できます。
scrolldelay: 各スクロールラウンド間の遅延時間、大きいほど遅くなります。
scrollamount: 1回のスクロールにかかる総時間。数値が小さいほどスクロールは遅くなります。
Behaviour: スクロールモード、3つの値。スクロール、ライド、オルタネート。
Align:テキストの配置の設定です。Middle、Bottom、Topが選択できます。
幅:スクロールするテキストボックスの幅です。値を入力し、続くラジオボックスから「ピクセル単位」または「パーセント単位」を選択します。
高さ:スクロールするテキストボックスの高さ。値を入力し、後続のラジオボックスから「ピクセル」または「パーセント」で選択します。
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">Welcome to Xiaojun Resources</font></p>
<p><font color="#ff4500">Here we share with you each of the latest free resources and information,</font></p>
<p><font color="#ff4500">Hope you like it, your support is my biggest motivation! </font></p>
<p><font color="#ff4500">If you have any suggestions you must speak up! </font></p>
<p><font color="#ff4500">The resources on this site are from the internet, if they infringe on you! </font></p>
<p><font color="#ff4500"></font></p>
<font color="#ff4500"><p><font color="#ff3300">Thank you for your support, Xiaojun is wonderful because of you</font>
</p></font></center><font color="#ff4500"></font></marquee>
効果2:テキストが左方向にスクロールする
<marquee direction="left" loop="-1"> 【お知らせ】チュートリアルの一部はTap knowのオリジナルです、出典を明記してください! </marquee>
画像スクロールのコードです。
<marquee direction="lift" loop="-1" scrollamount="20" width="500" height="210">
<a href="http://jun51.tap.cn/" target="_blank"><img height="200" width="300" src=" ;http://img011.photo.21cn.com/photos/mark/20110410/m620x800/CC6169D8EE67719C4299B0740123325E.jpg"/><img height="200 " width="300" src="http://img011.photo.21cn.com/photos/mark/20110410/m620x800/EB965C39B9A8B63AE3908267DD6C45C8. jpg"/><img height="200" width="300" src="http://img003.photo.21cn.com/photos/mark/20080517/ m620x800/676E5C63EA319EEABCCB6D03C19121D4.jpg"/>
</marquee>
いくらでも増やせます! しかし、表示を閲覧する際に影響があるようです! Googleを使うことをお勧めします!効果絶大です。
移動属性マーキーを使って、テキストの周りを踊るだけでなく、画像やテーブルなどにも適用することができます。
<marquee direction=left> KXYラーニングチャンネルへようこそ! </marquee>
direction=leftで方向を指定します。上のテキスト効果は "KXYラーニングチャンネルへようこそ!" 右から左へ移動!です。また、方向は右、上、下です。
方向以外にも、制限された要素を追加することができます。
移動する方法
ループで移動:loop=n (n, 回数分) 円形に移動:動作=scroll 1回だけ移動:動作=slide 前後に移動:動作=alternate
外観
フォントサイズ: <font size=n> (n、可変) アライン: align=top/middle/bottom ベースカラー: bgcolor=Blue(以下のような定義済みの色。ブラック、オリーブ、ティール、レッド、ブルー、マルーン、ネイビー、グレイ、ライム。フクシア、ホワイト、グリーン、パープル、シルバー、イエロー、アクア、または16進数)
その他
速度:scrollamount=n(n,変数) 遅延:scrolldelay==n(n,変数)
<marquee direction="移動する方向" height="移動領域の高さ" width="移動領域の幅" scrollamount="move speed" onmouseover= this.stop() onmouseout=this.start()> "
onmouseover マウスが移動領域の上に乗ったときに、移動を一時停止するように設定する
onmouseout マウスが離れたときにスクロールを継続する
マーキーコードでテキストや画像をスクロールさせる
TAP knowのスクロールテキストの設定は、今日そこで見ましたよ。以前は対応すらしていなかったもののようです。もしかしたら、使っていないかもしれません
以下は、TAPからテキスト掲示板を上下にスクロールさせるコードの説明です。
marquee パラメータ。
BGColor: スクロールするテキストボックスの背景色です。
Direction:スクロールの方向で、左、右、上、下を選択できます。
scrolldelay: 各スクロールラウンド間の遅延時間、大きいほど遅くなります。
scrollamount: 1回のスクロールにかかる総時間。数値が小さいほどスクロールは遅くなります。
Behaviour: スクロールモード、3つの値。スクロール、ライド、オルタネート。
Align:テキストの配置の設定です。Middle、Bottom、Topが選択できます。
幅:スクロールするテキストボックスの幅です。値を入力し、続くラジオボックスから「ピクセル単位」または「パーセント単位」を選択します。
高さ:スクロールするテキストボックスの高さ。値を入力し、後続のラジオボックスから「ピクセル」または「パーセント」で選択します。
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">Welcome to Xiaojun Resources</font></p>
<p><font color="#ff4500">Here we share with you each of the latest free resources and information,</font></p>
<p><font color="#ff4500">Hope you like it, your support is my biggest motivation! </font></p>
<p><font color="#ff4500">If you have any suggestions you must speak up! </font></p>
<p><font color="#ff4500">The resources on this site are from the internet, if they infringe on you! </font></p>
<p><font color="#ff4500"></font></p>
<font color="#ff4500"><p><font color="#ff3300">Thank you for your support, Xiaojun is wonderful because of you</font>
</p></font></center><font color="#ff4500"></font></marquee>
効果2:テキストが左方向にスクロールする
<marquee direction="left" loop="-1"> 【お知らせ】チュートリアルの一部はTap knowのオリジナルです、出典を明記してください! </marquee>
画像スクロールのコードです。
コピーコード
コードは以下の通りです。
<marquee direction="lift" loop="-1" scrollamount="20" width="500" height="210">
<a href="http://jun51.tap.cn/" target="_blank"><img height="200" width="300" src=" ;http://img011.photo.21cn.com/photos/mark/20110410/m620x800/CC6169D8EE67719C4299B0740123325E.jpg"/><img height="200 " width="300" src="http://img011.photo.21cn.com/photos/mark/20110410/m620x800/EB965C39B9A8B63AE3908267DD6C45C8. jpg"/><img height="200" width="300" src="http://img003.photo.21cn.com/photos/mark/20080517/ m620x800/676E5C63EA319EEABCCB6D03C19121D4.jpg"/>
</marquee>
いくらでも増やせます! しかし、表示を閲覧する際に影響があるようです! Googleを使うことをお勧めします!効果絶大です。
関連
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン