- 本站大部分内容从网上收集,收集目的仅供研究、学习。涉及版权或不希望收录您的文章请您及时与我联系。
- 本站IM群，请自行选择。请各位朋友按照自己喜好加入。加入群后请及时发言，防止被清理。谢谢您的合作！！！
- QQ群:Y①WEB开发(ASP.NET）号码:7351660 QQ群:Y②WEB开发(ASP+.NET）号码:11864905
- QQ群:Y③WEB开发(DIV+CSS）号码:16610506 QQ群:Y④WEB开发(JS+AJAX）号码:16143998
- QQ群:Y⑤WEB开发(新手）号码:12777715 MSN群:yaosansi[at]126.com
原文:http://bbs.blueidea.com/viewthread.php?tid=2562919&page=
由于marquee是不符合WEB标准的,marquee标签现在用得是越来越少了，所以滚动效果的做法大多也都改用javascript来实现了
第一种方法：出处 网易游戏
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>热点新闻</title>
<style type="text/css">
<!--body { margin: 0px; font-size: 12px; color: #938C43; line-height: 150%; text-align:center;}a:link{color: #9D943A;font-size:12px;}a:hover{color: #FF3300;font-size:12px;}a:visited{color: #9D943A;font-size:12px;}a.red:link{color: #ff0000;font-size:12px;}a.red:hover{color: #ff0000;font-size:12px;}a.red:visited{color: #ff0000;font-size:12px;}#marqueeBox{background:#f7f7f7;border:1px solid silver;padding:1px;text-align:center;margin:0 auto;}--></style>
</head>
<body>
<h4>滚动新闻</h4>
<script language="JavaScript" type="text/javascript">1:2: var marqueeContent=new Array();3: marqueeContent[0]="<a href=http://xyq.163.com/news/2006/11/2-2-20061102170913.html target=_blank>用“梦幻密保”快速取回帐号密码</a>";4: marqueeContent[1]="<a href=http://ekey.163.com/ target=_blank>网易将军令官方网站</a>";5: marqueeContent[2]="<a href=http://xyq.163.com/download/wallpaper.htm target=_blank>最新壁纸下载</a>";6: marqueeContent[3]="<a href=http://xyq.163.com/download/around.htm target=_blank>最新屏保下载</a>";7: var marqueeInterval=new Array();8: var marqueeId=0;9: var marqueeDelay=2000;10: var marqueeHeight=20;11: function initMarquee() {12: var str=marqueeContent[0];13: document.write('<div id="marqueeBox" style="overflow:hidden;width:250px;height:'+marqueeHeight+'px" onmouseover="clearInterval(marqueeInterval[0])" onmouseout="marqueeInterval[0]=setInterval(\'startMarquee()\',marqueeDelay)"><div>'+str+'</div></div>');14: marqueeId++;15: marqueeInterval[0]=setInterval("startMarquee()",marqueeDelay);16: }17: function startMarquee() {18: var str=marqueeContent[marqueeId];19: marqueeId++;20: if(marqueeId>=marqueeContent.length) marqueeId=0;21: if(document.getElementById("marqueeBox").childNodes.length==1) {22: var nextLine=document.createElement('DIV');23: nextLine.innerHTML=str;24: document.getElementById("marqueeBox").appendChild(nextLine);25: }26: else {27: document.getElementById("marqueeBox").childNodes[0].innerHTML=str;28: document.getElementById("marqueeBox").appendChild(document.getElementById("marqueeBox").childNodes[0]);29: document.getElementById("marqueeBox").scrollTop=0;30: }31: clearInterval(marqueeInterval[1]);32: marqueeInterval[1]=setInterval("scrollMarquee()",20);33: }34: function scrollMarquee() {35: document.getElementById("marqueeBox").scrollTop++;36: if(document.getElementById("marqueeBox").scrollTop%marqueeHeight==(marqueeHeight-1)){37: clearInterval(marqueeInterval[1]);38: }39: }40: initMarquee();</script>
</body>
</html>
第二种方法：
原文作者：风动人
<html>
<head>
<title> SCROLL </title>
<style type="text/css">
#infozone{font-size:12px;color:#aa6;overflow:hidden;width:100px;height:20px;}#infozone div{height:20px;line-height:20px;white-space:nowrap;overflow:hidden;}</style>
<script type="text/javascript">1:2: var tc;3: window.onload=function(){4: var o=document.getElementById('infozone');hscroll(o);5: window.setInterval(function(){window.clearTimeout(tc);o.firstChild.style.marginLeft='0px';scrollup(o,20,0);},10000);6: }7: function scrollup(o,d,c){8: if(d==c){9: var t=o.firstChild.cloneNode(true);10: o.removeChild(o.firstChild);o.appendChild(t);11: t.style.marginTop=o.firstChild.style.marginTop='0px';12: hscroll(o);13: }14: else{15: ch=false;var s=3,c=c+s,l=(c>=d?c-d:0);16: o.firstChild.style.marginTop=-c+l+'px';17: window.setTimeout(function(){scrollup(o,d,c-l)},50);18: }19: }20: function hscroll(o){21: var w1=o.firstChild.offsetWidth,w2=o.offsetWidth;22: if(w1<=w2)return;23: tc=window.setTimeout(function(){hs(o,w1-w2,0,w1-w2)},3500);24: }25: function hs(o,d,c,p){26: c++;var t=(c>0?-c:c);o.firstChild.style.marginLeft=t+'px';27: if(c==d){if(d==0){tc=window.setTimeout(function(){hs(o,p,0,p)},2500);}else tc=window.setTimeout(function(){hs(o,0,-p,p)},3500);}28: else tc=window.setTimeout(function(){hs(o,d,c,p)},5);29: }</script>
</head>
<body>
<div id="infozone"><div>温岚 - 屋顶(周杰伦 对唱版)</div><div>范玮琪 - 那些花儿</div><div>张韶涵 - 娃娃</div><div>孙楠&韩红 - 美丽的神话</div></div>
</body>
</html>
第三种是最精简的，代码非常少。
原文作者：cityvoice
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style type="text/css">
#newslist{background:#f7f7f7;border:1px solid silver;padding:1px;height:20px;line-height:20px;width:300px;
}
#contain{font-size:12px;overflow:hidden;list-style:none;width:300px;height:20px;margin:0px;padding:0;
}
#contain li{height:20px;line-height:20px;white-space:nowrap;overflow:hidden;
}
</style>
</HEAD>
<BODY>
<div id="newslist">
<ul id="contain">
<li><a href="http:/www.iwcn.net">温岚 - 屋顶(左右摆动)</a></li>
<li><a href="http:/www.iwcn.net">范玮琪 - 那些花儿</a></li>
<li><a href="http:/www.iwcn.net">张韶涵 - 娃娃</a></li>
<li><a href="http:/www.iwcn.net">孙楠&韩红 - 美丽的神话</a></li>
<li><a href="http:/www.iwcn.net">张信哲 - 白月光</a></li>
</ul>
</div>
<SCRIPT LANGUAGE="JavaScript">1:2: function xx(){3: var container=document.getElementById("contain");4: container.appendChild(container.firstChild);5: }6: setInterval("xx()",3000);</SCRIPT>
</BODY>
</HTML>
第四种:
<style>
A {COLOR: #333333; TEXT-DECORATION: none ;border-bottom:1px dotted
}
A:hover {COLOR: #333333; background-color:#C0FFFF;
}
td {FONT-SIZE: 9pt; FONT-FAMILY: "Verdana"; color:#3333333;letter-spacing : 1pt ;line-
height :14pt}
</style>
<table width=380 bgcolor=#f7f8f9 border=0 cellspacing=0 style="border:#cccccc 1px solid;"
height="18"><tr><td><div id="icefable1" style="width:500;">
<TABLE cellSpacing=0 cellPadding=0 border=0 height="18"><TBODY><TR><TD
width=201 height=18>·<A href="http://itbbs.pconline.com.cn/traditional/showVote.jsp? target=_blank>是时候给家里安装无线网络啦
topic=390802&forum=27&voteId=642"
</A></TD><TD width=177 height=18>·<A
href="http://itbbs.pconline.com.cn/traditional/showVote.jsp? target=_blank>RSS：会不会革IE的命?
topic=391065&forum=26&voteId=645"
</A></TD></TR><TR><TD height=18>·<A
href="http://itbbs.pconline.com.cn/traditional/article.jsp?topic=349368&forum=5%20"
target=_blank>惨痛！AGP插槽烧了......</A></TD><TD height=18>·<A
href="http://itbbs.pconline.com.cn/traditional/article.jsp? target=_blank>PC 上演绎 MAC 神话 ！
topic=389094&forum=26&voteId=0"
</A></TD></TR><TR><TD height=18>·<A
href="http://itbbs.pconline.com.cn/traditional/article.jsp?topic=386963&forum=7"
target=_blank>六种完美解决显示器问题方法</A> </TD><TD height=18><A
href="http://itbbs.pconline.com.cn/traditional/article.jsp?topic=388737&forum=4"
target=_blank>·Free仔靓卡损失惨重!多图</A></TD></TR></TBODY></TABLE>
</div><div id="icefable2" style="position:absolute;z-></div></td></tr></table>
index:1;visibility:hidden"
<script>1:2: marqueesHeight=18;3: stopscroll=false;4: icefable1.scrollTop=0;5: with(icefable1){6: style.width=0;7: style.height=marqueesHeight;8: style.overflowX="visible";9: style.overflowY="hidden";10: noWrap=true;11: onmouseover=new Function("stopscroll=true");12: onmouseout=new Function("stopscroll=false");13: }14: preTop=0; currentTop=0; stoptime=0;15: function init_srolltext(){16: icefable2.innerHTML="";17: icefable2.innerHTML+=icefable1.innerHTML;18: icefable1.innerHTML=icefable2.innerHTML+icefable2.innerHTML;19: setInterval("scrollUp()",50);20: }21: function scrollUp(){22: if(stopscroll==true) return;23: currentTop+=1;24: if(currentTop==19)25: {26: stoptime+=1;27: currentTop-=1;28: if(stoptime==50)29: {30: currentTop=0;31: stoptime=0;32: }33: }34: else {35: preTop=icefable1.scrollTop;36: icefable1.scrollTop+=1;37: if(preTop==icefable1.scrollTop){38: icefable1.scrollTop=icefable2.offsetHeight-marqueesHeight;39: icefable1.scrollTop+=1;40: }41: }42: }43: init_srolltext();</script>
<BR><BR><BR>
第五种: