Writing on line

代替marquee的滚动字幕效果

现在的网页设计里都不喜欢用marquee来实现滚动图片，字幕等的效果，今天根据一个朋友的指点，参考网易游戏频道的字幕样式做了一个用javascript实现的滚动字幕。具体效果见这里

具体实现代码如下：

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

<script language="JavaScript" type="text/javascript">
var marqueeContent=new Array();
marqueeContent[0]="<a xhref=http://www.lidecheng.com/FireFox/ target=_blank>推荐使用FireFox浏览器</a>";
marqueeContent[1]="<a xhref=http://www.lidecheng.com/picasa/ target=_blank>免费强大的图片管理工具</a>";
marqueeContent[2]="<a xhref=http://www.lidecheng.com/kfc/ target=_blank>肯德基优惠券打印版</a>";
marqueeContent[3]="<a xhref=http://www.lidecheng.com/adtools/ target=_blank>让网站为您带来收入</a>";
marqueeContent[4]="<a xhref=http://www.google.com/talk/intl/zh-CN/ target=_blank>下载&使用&推广GTalk</a>";
marqueeContent[5]="<a xhref=http://www.sogou.com/pinyin/ target=_blank>搜狗拼音输入法</a>";
<!--可使用同样语句继续添加条目-->
var marqueeInterval=new Array();
var marqueeId=0;
var marqueeDelay=2000;
var marqueeHeight=20;
function initMarquee() {
var str=marqueeContent[0];
document.write('<div id="marqueeBox" style="overflow:hidden;width:140px;height:'+marqueeHeight+'px" onmouseover="clearInterval(marqueeInterval[0])" onmouseout="marqueeInterval[0]=setInterval(\'startMarquee()\',marqueeDelay)"><div>'+str+'</div></div>');
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();
</script>

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

只列出 javascript 语句，需全部代码请直接查看效果页的源代码。