1. ホーム
  2. Web制作
  3. HTML/Xhtml

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を使うことをお勧めします!効果絶大です。