由于marquee标签现在用得是越来越少了，所以滚动效果的做法大多也都改用javascript来实现了，至于不明白为什么不直接用marquee标签的朋友，不妨先阅读一下这篇文章。

第一种方法：用javascript模拟marquee的做法。

出处：网易游戏

热点新闻 滚动新闻 var marqueeContent=new Array(); marqueeContent[0]="用"梦幻密保"快速取回帐号密码"; marqueeContent[1]="网易将军令官方网站"; marqueeContent[2]="最新壁纸下载"; marqueeContent[3]="最新屏保下载"; var marqueeInterval=new Array(); var marqueeId=0; var marqueeDelay=2000; var marqueeHeight=20; function initMarquee() { var str=marqueeContent[0]; document.write(''+str+''); marqueeId++; marqueeInterval[0]=setInterval("startMarquee()",marqueeDelay); } function startMarquee() { var str=marqueeContent[marqueeId]; marqueeId++; if(marqueeId>=marqueeContent.length) marqueeId=0; if(document.getElementById("marqueeBox").childNodes.length==1) { var nextLine=document.createElement('DIV'); nextLine.innerHTML=str; document.getElementById("marqueeBox").appendChild(nextLine); } else { document.getElementById("marqueeBox").childNodes[0].innerHTML=str; document.getElementById("marqueeBox").appendChild(document.getElementById("marqueeBox").childNodes[0]); document.getElementById("marqueeBox").scrollTop=0; } clearInterval(marqueeInterval[1]); marqueeInterval[1]=setInterval("scrollMarquee()",20); } function scrollMarquee() { document.getElementById("marqueeBox").scrollTop++; if(document.getElementById("marqueeBox").scrollTop%marqueeHeight==(marqueeHeight-1)){ clearInterval(marqueeInterval[1]); } } initMarquee();

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

个人观点：从web可用性角度上讲，我们在采用这段代码的同时要考虑到noscript环境下的可用性，建议将内容还是以下边代码的形式出现在页面中。如：

复制代码 代码如下:

<divid="newslist">

<ul>

<li><ahref=http://xyq.163.com/news/2006/11/2-2-20061102170913.htmltarget=_blank>用“梦幻密保”快速取回帐号密码</a></li>

<li><ahref=http://ekey.163.com/target=_blank>网易将军令官方网站</a></li>

<li><ahref=http://xyq.163.com/download/wallpaper.htmtarget=_blank>最新壁纸下载</a></li>

<li><ahref=http://xyq.163.com/download/around.htmtarget=_blank>最新屏保下载</a></li>

</ul>

</div>

然后用脚本去设置隐藏，将列表项读进javascript中定义的数组中。即可达到在noscript环境下也能正常看到内容列表。

第二种方法：这个更强，能自动根据内容自动进行左右滚动，解决了宽度太小造成的截取问题。

原文作者：风动人

SCROLL #infozone{font-size:12px;color:#aa6;overflow:hidden;width:100px;height:20px;} #infozone div{height:20px;line-height:20px;white-space:nowrap;overflow:hidden;} var tc; window.onload=function(){ var o=document.getElementById('infozone');hscroll(o); window.setInterval(function(){window.clearTimeout(tc);o.firstChild.style.marginLeft='0px';scrollup(o,20,0);},10000); } function scrollup(o,d,c){ if(d==c){ var t=o.firstChild.cloneNode(true); o.removeChild(o.firstChild);o.appendChild(t); t.style.marginTop=o.firstChild.style.marginTop='0px'; hscroll(o); } else{ ch=false;var s=3,c=c+s,l=(c>=d?c-d:0); o.firstChild.style.marginTop=-c+l+'px'; window.setTimeout(function(){scrollup(o,d,c-l)},50); } } function hscroll(o){ var w1=o.firstChild.offsetWidth,w2=o.offsetWidth; if(w10?-c:c);o.firstChild.style.marginLeft=t+'px'; 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);} else tc=window.setTimeout(function(){hs(o,d,c,p)},5); } 温岚 - 屋顶(周杰伦 对唱版)范玮琪 - 那些花儿张韶涵 - 娃娃孙楠&韩红 - 美丽的神话

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

个人观点：从xhtml的语义化的角度看，页面内容中滥用div标签现象比较严重，可改成ul/li形式。

第三种是最精简的，代码非常少。

原文作者：cityvoice

New Document #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; } 温岚 - 屋顶(左右摆动) 范玮琪 - 那些花儿 张韶涵 - 娃娃 孙楠&韩红 - 美丽的神话 张信哲 - 白月光

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

个人观点：太短小精干了，如果你喜欢简单的话，这个也可以考虑的。