1.Marquee標記用於在可用瀏覽區域中滾動文本。這個標記只適用於IE3以後的版的瀏覽器。
格式:
<MARQUEE ALIGN="…"
BEHAVIOR="…"
BGCOLOR="…"
DIRECTION="…"
HEIGHT="…"
WIDTH="…"
HSPACE="…"
VSPACE="…"
LOOP="…"
SCROLLAMOUNT="…"
SCROLLDELAY="…"
ONMOUSEOUT=this.start()
ONMOUSEOVER=this.stop()
>…
</MARQUEE>
屬性:
ALIGN:用於按設定的值對齊滾動的文本。ALIGN可以設定的值有:LEFT,CENTER,RIGHT,TOP,BOTTOM。此屬性不是必須使用的。
例:
<MARQUEE ALIGN="TOP">這段滾動文字設定爲上對齊</MARQUEE>
BEHAVIOR:可以在頁面上一旦出現文本時讓瀏覽器按照設定的方法來處理文本。如果設定的方法是SLIDE,那麼文本就移動到文檔上,並停留在頁邊距上。如果設定爲ALTERNATE,則文本從一邊移動到另一邊。如果設定爲SCROLL,文本將在頁面上反覆滾動。本屬性不是必須使用的。可以設定的值有:SILIDE,ALTERNATE,SCROLL。
例:
<MARQUEE BEHAVIOR="ALTERNATE">文字從一邊移動到另一邊</MARQUEE>
BGCOLOR:用於設定字幕的背景顏色。背景顏色可用RGB、16進制值的格式或顏色名稱來設定。
例:
<MARQUEE BGCOLOR="RED">用顏色名稱設定滾動文字背景顏色爲紅色</MARQUEE>
<MARQUEE BGCOLOR="#FF0000">用16進制值設定滾動文字背景顏色爲紅色</MARQUEE>
<MARQUEE BGCOLOR=RGB(100%,0%,0%)>用RGB設定滾動文字背景顏色爲紅色</MARQUEE>
DIRECTION:用於設定文本滾動的方向,可以設定的值有:LEFT,RIGHT。此屬性不是必須使用的。
例:
<MARQUEE DIRECTION="LEFT">文字向左邊滾動</MARQUEE>
<MARQUEE DIRECTION="RIGHT">文字向右邊滾動</MARQUEE>
HEIGHT:用於設定滾動字幕的高度,高度可用像素或可視頁面的百分比來表示。此屬性不是必須使用的。
例:
<MARQUEE HEIGHT="10%">滾動字幕的高度是可視頁面的10%</MARQUEE>
<MARQUEE HEIGHT="12">滾動字幕的高度是12像素</MARQUEE>
WIDTH:用於設定字幕的寬度,寬度可用像素或可視頁面的百分比來表示。此屬性不是必須使用的。
例:
<MARQUEE WIDTH="90%">滾動字幕的寬度是可視頁面的90%</MARQUEE>
<MARQUEE WIDTH="200">滾動字幕的寬度是200像素</MARQUEE>
HSPACE:用於設定滾動字幕左右的空白空間,空白空間用像素表示。此屬性不是必須使用的。
例:
<MARQUEE HSPACE="15">滾動字幕左右空白空間爲15個像素</MARQUEE>
VSPACE:用於設定滾動字幕上下的空白空間,空白空間用像素表示。此屬性不是必須使用的。
例:
<MARQUEE VSPACE="2">滾動字幕上下的空白空間爲2個像素</MARQUEE>
LOOP:用於設定滾動字幕的滾動次數。當LOOP的值爲"INFINITE"或是"-1"時,則文字會無限制地滾動。此屬性不是必須使用的。
例:
<MARQUEE LOOP="-1">文字滾動無數次</MARQUEE>
<MARQUEE LOOP="5">文字滾動5次</MARQUEE>
SCROLLAMOUNT:用於設定每個連續滾動文本後面的間隔,該間隔用像素表示。此屬性不是必須使用的。
2. 滾動效果
例:
<MARQUEE SCROLLAMOUNT="10">此文本後面的間隔爲10個像素</MARQUEE>
SCROLLDELAY:用於設定兩次滾動操作之間的間隔時間,該時間以毫秒爲單位。此屬性不是必須使用的。
例:
<MARQUEE SCROLLDELAY="5">此文本兩次滾動之間的間隔時間爲5毫秒</MARQUEE>
ONMOUSEOUT=this.start() :用來設置鼠標移出該區域時繼續滾動
ONMOUSEOVER=this.stop():用來設置鼠標移入該區域時停止滾動
-------------------------------------------------------------
基本語法
<marquee> ... </marquee>
文字移動屬性的設置 方向 <direction=#> #=left, right <marquee direction=left>從右向左移!</marquee>
方式 <bihavior=#> #=scroll, slide, alternate <marquee behavior=scroll>一圈一圈繞着走!</marquee>
<marquee behavior=slide>只走一次就歇了!</marquee>
<marquee behavior=alternate>來回走</marquee>
循環 <loop=#> #=次數;若未指定則循環不止(infinite) <marquee loop=3 width=50% behavior=scroll>只走 3 趟</marquee> <marquee loop=3 width=50% behavior=slide>只走 3 趟</marquee>
<marquee loop=3 width=50% behavior=alternate>只走 3 趟!</marquee>
速度 <scrollamount=#> <marquee scrollamount=20>啦啦啦,我走得好快喲!</marquee>
延時 <scrolldelay=#> <marquee scrolldelay=500 scrollamount=100>啦啦啦,我走一步,停一停!</marquee>
外觀(Layout)設置 對齊方式(Align) <align=#> #=top, middle, bottom <font size=6>
<marquee align=# width=400>啦啦啦,我會移動耶!</marquee>
</font> 底色 <bgcolor=#> #=rrggbb 16 進制數碼,或者是下列預定義色彩:
Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,
Fuchsia, White, Green, Purple, Silver, Yellow, Aqua <marquee bgcolor=aaaaee>顏色!</marquee>
面積 <height=# width=#> <marquee height=40 width=50% bgcolor=aaeeaa>面積!</marquee>
空白 (Margins)<hspace=# vspace=#>
<marquee hspace=20 vspace=20 width=150 bgcolor=ffaaaa align=middle>面積!</marquee><marquee direction=up>我在向上走!</marquee>
<marquee direction=down>我又下向走了</marquee>補充一個無縫連接的循環滾動
<html>
<head>
</head>
<body>
<TD WIDTH=390 HEIGHT=99><MARQUEE scrollAmount=4 scrollDelay=0 loop=1 width=390 height=99>
<SCRIPT language=JavaScript>
for(t=1;t<=1000;t++)
document.write("11111111111112222222222222222233333333333333")
</SCRIPT>
</MARQUEE></TD>
</body>
</html>另一種實現無縫連接循環滾動得方法<div id=demo style=overflow:hidden;height:100px width:100px>
<div id=demo1>
<a href="#" target="_blank"><img src="http://www.5dmedia.com/bbs/icon/nudeangel.gif" width="80" height="80" border="0"></a><a href="#" target="_blank"><img src="http://www.5dmedia.com/bbs/icon/nudeangel.gif" width="80" height="80" border="0"></a><a href="#" target="_blank"><img src="http://www.5dmedia.com/bbs/icon/nudeangel.gif" width="80" height="80" border="0"></a><a href="#" target="_blank"><img src="http://www.5dmedia.com/bbs/icon/nudeangel.gif" width="80" height="80" border="0"></a><a href="#" target="_blank">nudeangel_2</a><a href="#" target="_blank">nudeangel_3</a><a href="#" target="_blank">nudeangel_4</a><a href="#" target="_blank">nudeangel_5</a><a href="#" target="_blank">inudeangel_6</a><a href="#" target="_blank">nudeangel_7</a></div>
<div id=demo2></div>
</div>
<script>
var t=demo.scrollTop
demo2.innerHTML=demo1.innerHTML
function nudeangelMarquee(){
if(demo2.offsetTop-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight
else
demo.scrollTop++
}
var repeat=setInterval(nudeangelMarquee,50);
demo.onmouseover=function() {clearInterval(repeat);}
demo.onmouseout=function() {repeat=setInterval(nudeangelMarquee,50);}
-----------------------------------------------------------
<marquee><bihavior=#> #=scroll, slide, alternate <marquee behavior=scroll>一圈一圈繞着走!</marquee>
最簡單的圖片移動特效———圖片水平向左循環移動
:<marquee>
<img src="http://unibbs.unibbs.com/images/upphoto/647253.jpg">
<img src="http://unibbs.unibbs.com/images/upphoto/647264.jpg">
<img src="http://unibbs.unibbs.com/images/upphoto/647269.jpg">
<img src="http://unibbs.unibbs.com/images/upphoto/647247.jpg">
<img src="http://unibbs.unibbs.com/images/upphoto/648164.gif">
<img src="http://unibbs.unibbs.com/images/upphoto/648169.gif">
<img src="http://unibbs.unibbs.com/images/upphoto/648177.gif">
<img src="http://unibbs.unibbs.com/images/upphoto/648182.gif">
<img src="http://unibbs.unibbs.com/images/upphoto/648186.gif">
<img src="http://unibbs.unibbs.com/images/upphoto/648189.gif">
</marquee>
HTML滾動代碼
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.