[HTML代碼]會移動的文字(Marquee)

[HTML代碼]會移動的文字(Marquee)

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：用於設定每個連續滾動文本後面的間隔，該間隔用像素表示。此屬性不是必須使用的。　
　　　　例：　
　　　　<MARQUEE　SCROLLAMOUNT="10">此文本後面的間隔為10個像素</MARQUEE>　
　　　　　　
　　　　SCROLLDELAY：用於設定兩次滾動操作之間的間隔時間，該時間以毫秒為單位。此屬性不是必須使用的。　
　　　　例：　
　　　　<MARQUEE　SCROLLDELAY="5">此文本兩次滾動之間的間隔時間為5毫秒</MARQUEE>

ONMOUSEOUT=this.start() ：用來設定滑鼠移出該地區時繼續滾動
ONMOUSEOVER=this.stop()：用來設定滑鼠移入該地區時停止滾動

-------------------------------------------------------------

<TABLE height=393 cellSpacing=0 cellPadding=0 width=524 align=center bgColor=#d1f6db border=0><FONT size=4><FONT color=#990033></FONT></FONT>
<TBODY>
<TR><FONT size=4><FONT color=#990033></FONT></FONT>
<TD style="BORDER-RIGHT: 2px solid; PADDING-RIGHT: 1px; BORDER-TOP: 2px solid; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; BORDER-LEFT: 2px solid; LINE-HEIGHT: 20px; PADDING-TOP: 1px; BORDER-BOTTOM: 2px solid" borderColor=#99ccff bgColor=#000000 colSpan=2 height=393>
<P style="MARGIN-TOP: -5px; MARGIN-BOTTOM: -5px; LINE-HEIGHT: 100%">
<MARQUEE scrollDelay=100 direction=up height=393><IMG src="http://sc.chinadownz.com/UploadFiles/200506/DPic/20050601091756252.jpg"> <IMG src="http://sc.chinadownz.com/UploadFiles/200506/DPic/20050601091756538.jpg"> <IMG src="http://sc.chinadownz.com/UploadFiles/200506/DPic/20050601091756304.jpg"> <IMG src="http://sc.chinadownz.com/UploadFiles/200506/DPic/20050601091756318.jpg"> <IMG src="http://sc.chinadownz.com/UploadFiles/200506/DPic/20050601091756503.jpg"> <IMG src="http://sc.chinadownz.com/UploadFiles/200506/DPic/20050601091756827.jpg"> <IMG src="http://sc.chinadownz.com/UploadFiles/200506/DPic/20050601091756521.jpg"></MARQUEE></P><PRE style="MARGIN-TOP: 0px; MARGIN-BOTTOM: 0px; LINE-HEIGHT: 100%"></FONT></PRE></TD></TR></TBODY></TABLE>

------------------------------------------------------------

基本文法
<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=center>面積！</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 style=overflow:hidden;height:100px width:100px>
<div 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 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>