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

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

php中世界最好的语言
リリース: 2018-02-07 10:09:58
オリジナル
2582 人が閲覧しました

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

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の中国語サイトです!

関連書籍:

Div の境界線と透明度のスタイルを設定する方法


HTML のメタ ビューポート属性を使用する方法


タグのデフォルト スタイルを操作する方法


ページ検索エンジンで呼び出す方法


フォームのデフォルト送信方法を変更する方法

以上がマーキー要素を使用してフォントや画像をスクロールする効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート