|
[HTML代碼]會(huì)移動(dòng)的文字(Marquee) Marquee標(biāo)記用于在可用瀏覽區(qū)域中滾動(dòng)文本。這個(gè)標(biāo)記只適用于IE3以后的版的瀏覽器?！?br> 格式：
<MARQUEE ALIGN="…"
BEHAVIOR="…"
BGCOLOR="…"
DIRECTION="…"
HEIGHT="…"
WIDTH="…"
HSPACE="…"
VSPACE="…"
LOOP="…"
SCROLLAMOUNT="…"
SCROLLDELAY="…"
ONMOUSEOUT=this.start()
ONMOUSEOVER=this.stop()
>…
</MARQUEE>
屬性：
ALIGN：用于按設(shè)定的值對(duì)齊滾動(dòng)的文本。ALIGN可以設(shè)定的值有：LEFT，CENTER，RIGHT，TOP，BOTTOM。此屬性不是必須使用的?！?br> 例：
<MARQUEE ALIGN="TOP">這段滾動(dòng)文字設(shè)定為上對(duì)齊</MARQUEE>
BEHAVIOR：可以在頁面上一旦出現(xiàn)文本時(shí)讓瀏覽器按照設(shè)定的方法來處理文本。如果設(shè)定的方法是SLIDE，那么文本就移動(dòng)到文檔上，并停留在頁邊距上。如果設(shè)定為ALTERNATE，則文本從一邊移動(dòng)到另一邊。如果設(shè)定為SCROLL，文本將在頁面上反復(fù)滾動(dòng)。本屬性不是必須使用的?？梢栽O(shè)定的值有：SILIDE，ALTERNATE，SCROLL。
例：
<MARQUEE BEHAVIOR="ALTERNATE">文字從一邊移動(dòng)到另一邊</MARQUEE>
BGCOLOR：用于設(shè)定字幕的背景顏色。背景顏色可用RGB、16進(jìn)制值的格式或顏色名稱來設(shè)定?！?br> 例：
<MARQUEE BGCOLOR="RED">用顏色名稱設(shè)定滾動(dòng)文字背景顏色為紅色</MARQUEE>
<MARQUEE BGCOLOR="#FF0000">用16進(jìn)制值設(shè)定滾動(dòng)文字背景顏色為紅色</MARQUEE>
<MARQUEE BGCOLOR=RGB(100%,0%,0%)>用RGB設(shè)定滾動(dòng)文字背景顏色為紅色</MARQUEE>
DIRECTION：用于設(shè)定文本滾動(dòng)的方向，可以設(shè)定的值有：LEFT，RIGHT。此屬性不是必須使用的?！?br> 例：
<MARQUEE DIRECTION="LEFT">文字向左邊滾動(dòng)</MARQUEE>
<MARQUEE DIRECTION="RIGHT">文字向右邊滾動(dòng)</MARQUEE>
HEIGHT：用于設(shè)定滾動(dòng)字幕的高度，高度可用像素或可視頁面的百分比來表示。此屬性不是必須使用的?！?br> 例：
<MARQUEE HEIGHT="10%">滾動(dòng)字幕的高度是可視頁面的10%</MARQUEE>
<MARQUEE HEIGHT="12">滾動(dòng)字幕的高度是12像素</MARQUEE>
WIDTH：用于設(shè)定字幕的寬度，寬度可用像素或可視頁面的百分比來表示。此屬性不是必須使用的?！?br> 例：
<MARQUEE WIDTH="90%">滾動(dòng)字幕的寬度是可視頁面的90%</MARQUEE>
<MARQUEE WIDTH="200">滾動(dòng)字幕的寬度是200像素</MARQUEE>
HSPACE：用于設(shè)定滾動(dòng)字幕左右的空白空間，空白空間用像素表示。此屬性不是必須使用的?！?br> 例：
<MARQUEE HSPACE="15">滾動(dòng)字幕左右空白空間為15個(gè)像素</MARQUEE>
VSPACE：用于設(shè)定滾動(dòng)字幕上下的空白空間，空白空間用像素表示。此屬性不是必須使用的?！?br> 例：
<MARQUEE VSPACE="2">滾動(dòng)字幕上下的空白空間為2個(gè)像素</MARQUEE>
LOOP：用于設(shè)定滾動(dòng)字幕的滾動(dòng)次數(shù)。當(dāng)LOOP的值為"INFINITE"或是"-1"時(shí)，則文字會(huì)無限制地滾動(dòng)。此屬性不是必須使用的?！?br> 例：
<MARQUEE LOOP="-1">文字滾動(dòng)無數(shù)次</MARQUEE>
<MARQUEE LOOP="5">文字滾動(dòng)5次</MARQUEE>
SCROLLAMOUNT：用于設(shè)定每個(gè)連續(xù)滾動(dòng)文本后面的間隔，該間隔用像素表示。此屬性不是必須使用的?！?br> 例：
<MARQUEE SCROLLAMOUNT="10">此文本后面的間隔為10個(gè)像素</MARQUEE>
SCROLLDELAY：用于設(shè)定兩次滾動(dòng)操作之間的間隔時(shí)間，該時(shí)間以毫秒為單位。此屬性不是必須使用的?！?br> 例：
<MARQUEE SCROLLDELAY="5">此文本兩次滾動(dòng)之間的間隔時(shí)間為5毫秒</MARQUEE> ONMOUSEOUT=this.start() ：用來設(shè)置鼠標(biāo)移出該區(qū)域時(shí)繼續(xù)滾動(dòng)
ONMOUSEOVER=this.stop()：用來設(shè)置鼠標(biāo)移入該區(qū)域時(shí)停止?jié)L動(dòng)
-------------------------------------------------------------
基本語法
<marquee> ... </marquee> 文字移動(dòng)屬性的設(shè)置
方向
<direction=#> #=left, right <marquee direction=left>從右向左移！</marquee>
方式
<bihavior=#> #=scroll, slide, alternate <marquee behavior=scroll>一圈一圈繞著走！</marquee>
<marquee behavior=slide>只走一次就歇了！</marquee>
<marquee behavior=alternate>來回走</marquee> 循環(huán)
<loop=#> #=次數(shù)；若未指定則循環(huán)不止(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> 延時(shí)
<scrolldelay=#> <marquee scrolldelay=500 scrollamount=100>啦啦啦，我走一步，停一停！
</marquee> 外觀(Layout)設(shè)置
對(duì)齊方式(Align)
<align=#> #=top, middle, bottom <font size=6>
<marquee align=# width=400>啦啦啦，我會(huì)移動(dòng)耶！</marquee>
</font>
底色
<bgcolor=#> #=rrggbb 16 進(jìn)制數(shù)碼，或者是下列預(yù)定義色彩：
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>
補(bǔ)充一個(gè)無縫連接的循環(huán)滾動(dòng) <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>
另一種實(shí)現(xiàn)無縫連接循環(huán)滾動(dòng)得方法
<div id=demo style=overflow:hidden;height:100px width:100px>
<div id=demo1>
<a href="#" target="_blank"><img src="http://www./bbs/icon/nudeangel.gif"
width="80" height="80"
border="0"></a>
<a href="#" target="_blank"><img src="http://www./bbs/icon/nudeangel.gif"
width="80" height="80"
border="0"></a>
<a href="#" target="_blank"><img src="http://www./bbs/icon/nudeangel.gif"
width="80" height="80"
border="0"></a>
<a href="#" target="_blank"><img src="http://www./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> 最簡(jiǎn)單的圖片移動(dòng)特效———圖片水平向左循環(huán)移動(dòng) ：<marquee> <img src=" http://unibbs./images/upphoto/647253.jpg"> <img src=" http://unibbs./images/upphoto/647264.jpg"> <img src=" http://unibbs./images/upphoto/647269.jpg"> <img src=" http://unibbs./images/upphoto/647247.jpg"> <img src=" http://unibbs./images/upphoto/648164.gif"> <img src=" http://unibbs./images/upphoto/648169.gif"> <img src=" http://unibbs./images/upphoto/648177.gif"> <img src=" http://unibbs./images/upphoto/648182.gif"> <img src=" http://unibbs./images/upphoto/648186.gif"> <img src=" http://unibbs./images/upphoto/648189.gif"> </marquee> 圖片或文字無縫滾動(dòng)代碼 第一個(gè)效果:
<MARQUEE scrollAmount=4 scrollDelay=0 loop=1 width=500 height=107>
<SCRIPT language=JavaScript>
for(t=1;t<=1000;t++)
document.write("這里是內(nèi)容部分")
</SCRIPT>
</MARQUEE>
要實(shí)現(xiàn)圖片效果請(qǐng)自行修改代碼:documnet.write ("內(nèi)部")；此代碼唯一一點(diǎn)不足就是沒有實(shí)現(xiàn)數(shù)標(biāo)懸停效果. 第二個(gè)效果:
<style>
a {font-size:9pt;color:#333;text-decoration:none;}
a:hover {color:#111;text-decoration:underline;}
</style>
<div id="marquees">
<a href="#">你可曾有過無數(shù)的夢(mèng)想</a><br><br>
<a href="#">卻在時(shí)光的流逝里幻滅</a><br><br>
<a href="#">你可曾對(duì)未來期待憧憬</a><br><br>
<a href="#">卻在成長(zhǎng)的歲月中迷失</a><br><br>
</div>
<script language="JavaScript">
marqueesHeight=200;
stopscroll=false;
with(marquees){
style.width=0;
style.height=marqueesHeight;
style.overflowX="visible";
style.overflowY="hidden";
noWrap=true;
onmouseover=new Function("stopscroll=true");
onmouseout=new Function("stopscroll=false");
}
document.write(‘<div id="templayer" style="position:absolute;z-index:1;visibility:hidden"></div>‘); preTop=0; currentTop=0; function init(){
templayer.innerHTML="";
while(templayer.offsetHeight<marqueesHeight){
templayer.innerHTML+=marquees.innerHTML;
}
marquees.innerHTML=templayer.innerHTML+templayer.innerHTML;
setInterval("scrollUp()",50);
}
document.body.onload=init; function scrollUp(){
if(stopscroll==true) return;
preTop=marquees.scrollTop;
marquees.scrollTop+=1;
if(preTop==marquees.scrollTop){
marquees.scrollTop=templayer.offsetHeight-marqueesHeight;
marquees.scrollTop+=1;
}
}
</script>
上代碼效果基本上實(shí)現(xiàn)了.也有數(shù)標(biāo)懸停功能. 第三個(gè)圖片效果:
<DIV id=demo style="overflow:hidden;height :200px;width :95px;background-color:white;color:#ffffff;
border-width :1px 1px 1px 1px;border-style :dotted dotted dotted dotted;border-color :black black black black;" align=center>
<DIV id=demo1>
<!-- 定義圖片 -->
<IMG src=http://www./images/logo.gif>
<IMG src=http://www./imageser/toplogo.gif>
<IMG src=http://www./img/common/logo.gif>
<IMG src=http://www./IconCode/LinkMeng_Logo.gif>
<IMG src=http://www./link/images/mylogo.gif>
<IMG src=http://www./images/logo_1.gif>
<IMG src=http://www./images/logo/lemongtree.gif>
<IMG src=http://www./images/logo/flashempire.gif>
</DIV>
<DIV id=demo2></DIV>
</DIV>
<SCRIPT>
var speed=30
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetTop-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight
else{
demo.scrollTop++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function(){clearInterval(MyMar)}
demo.onmouseout=function(){MyMar=setInterval(Marquee,speed)}
</SCRIPT> |
|
