ホームページ >ウェブフロントエンド >htmlチュートリアル >マーキー要素を使用してフォントや画像をスクロールする効果を実現する方法

マーキー要素を使用してフォントや画像をスクロールする効果を実現する方法

php中世界最好的语言オリジナル: 2018-02-07 10:09:582585ブラウズ

今回は、マーキー要素がフォントと画像をスクロールする効果を実現する方法を説明します。フォントと画像をスクロールする効果を実現するためのマーキー要素の注意事項は何ですか。実際のケースを見てみましょう。見て。

marquee 要素は、単純なフォント (画像など) のスライドやその他の効果を実現できます:

<style type="text/css"> 
#div01{ 
width: 500px; 
} 
</style> 
<script type="text/javascript"> 
</script> 
<marquee behavior="alertnate"><font size=30 color=&#39;red&#39;>www.baidu.com111</font></marquee> 
<marquee direction=right bgcolor=&#39;#ff2233&#39; behavior="alertnate"><font size=30 color=&#39;blue&#39;>www.baidu.com222</font></marquee> 
<marquee id="m3" direction=down bgcolor=&#39;#dbdbdb&#39; height=50px hspace=20px vspace=20px behavior="alertnate" scrollLeft=left onmouseover="this.stop()" onmouseout="this.start()"><font size=30 color=&#39;blue&#39;>www.baidu333.com</font></marquee> 
<marquee id="m4" direction=up bgcolor=&#39;#00dbdb&#39; behavior="alertnate"><font size=30 color=&#39;blue&#39;>www.baidu444.com</font></marquee>

<div id="div01"><marquee direction=right bgcolor=&#39;#ff2233&#39; behavior="alertnate" scrolldelay=100><font size=30 color=&#39;blue&#39;>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>

direction はスクロールの方向を表し、値は左、右、上、下にすることができ、デフォルトは左です

behavior は、スクロール方法、値スクロール (連続スクロール) スライド (1 回スライド) 交互 (前後にスクロール) にすることができます
loop はループの数を表し、値は正の整数で、デフォルトは無限ループです
scrollamount は、移動速度、値は正の整数、デフォルトは 6
scrolllay は一時停止時間を表します、値は正の整数、デフォルトは 0、単位はミリ秒のようです
align は要素の垂直方向の配置を表し、値は上、中、下で、デフォルトは中です。
bgcolor はモーションエリアの背景色を表します。値は 16 進数の RGB カラーです。デフォルトは白です。
height と width はモーションエリアの高さと幅を表します。値は正の整数 (単位はピクセル) またはパーセントです。高さはラベル内の要素の高さです。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>

これらの事例を読んだ後は、方法を習得したと思います。さらに興味深い情報については、の他の関連記事に注目してください。 phpの中国語サイトです！