HTML滾動代碼

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>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章