使用JavaScript实现新闻滚动效果

最近要实现一个滚动新闻效果，在网上查了一些资料，发现基本的实现方法有两种：

1. 使用Marquee标签。这个标签的使用我已经转载了一篇比较详细的文章，这个标签的优点是便于使用，缺点是人们已经逐渐不适用它了，许多浏览器不支持，甚至在IE8想，XHTML4.0的loose.dtd是可以的，而去掉loose.dtd却不行。
2. 使用div+javascript的方法。这种方法的好处是可以兼容几乎所有的浏览器，并且在可以预料的时间内仍能稳定运行。并且使用div使得网页可以利用现有的css资源实现很多炫目的效果。缺点是需要一定的编程经验和耐心。

使用javascript+div方式的基本原理是一样的，利用scrollTop属性和offsetheight属性来实现移动效果。一般使用两个div，里面的内容是一样的，然后利用两个div拼接，形成不断循环的效果。下面是我找到的两份示例代码，第一份正是我用的代码，可以运行。第二份我没做测试。写出来是为了做个对比，第二份应该是能用的，因为那是我从网站上摘下来的。

第一份代码

<div id="layer1" style="overflow-y:hidden;width:120;"> <div id="layer2"> <% ArrayList announceList = DBTools.getView("select * from sys_announce order by pubdate DESC"); for (int i = 1; i < announceList.size() && i < 5; i++) { String announceArr[] = (String[]) announceList.get(i); String content = announceArr[1]; String date = announceArr[2].substring(announceArr[2].indexOf("-")+1, announceArr[2].indexOf(" ")); %> <table cellspacing="0" cellpadding="0" border="0" width="43"> <tr> <td height="10"/> </tr> </table> <table cellspacing="0" cellpadding="0" border="0" width="136"> <tr> <td height="20" width="16" valign="top"> <img height="12" width="12" vspace="5" valign="top" src="images/index_18.gif" mce_src="images/index_18.gif"/> </td> <td width="108" style="line-height: 20px;" mce_style="line-height: 20px;"> <%=content%>  <%=date%> </td> <td></td> </tr> </table> <% } %> </div> <div id="layer3"></div> </div> <mce:script language="javascript"><!-- var layerHeight = 100; // 定义滚动区域的高度.100 var iFrame = 1; // 定义每帧移动的象素. var iFrequency = 50; // 定义帧频率. var timer; // 定义时间句柄. if(document.getElementById("layer2").offsetHeight >= layerHeight) document.getElementById("layer1").style.height = layerHeight; else document.getElementById("layer1").style.height = document.getElementById("layer2").offsetHeight; document.getElementById("layer3").innerHTML = document.getElementById("layer2").innerHTML; // alert(document.getElementById("layer2").innerHTML); function move(){ if(document.getElementById("layer1").scrollTop >= document.getElementById("layer2").offsetHeight){ document.getElementById("layer1").scrollTop -= (document.getElementById("layer2").offsetHeight - iFrame); } else { document.getElementById("layer1").scrollTop += iFrame; } } timer = setInterval("move()",iFrequency); document.getElementById("layer1").onmouseover=function() {clearInterval(timer);} document.getElementById("layer1").onmouseout=function() {timer=setInterval("move()",iFrequency);} // --></mce:script> 

第二份代码

<SCRIPT language="JavaScript"> var strArray=new Array(); strArray[1]='' +'<table width=136 border=0 cellspacing=0 cellpadding=0><tr><td width=16 height=20 valign=top><img src="/images/index_18.gif" mce_src="images/index_18.gif" width=12 height=12 vspace=5></td><td width=120><a title="中国自然资源学会第六次全国会员代表大会暨学术年会通知（第2号）（09.10）" target="_blank" href="moban/showCommonTopic.jsp?id=10560" mce_href="moban/showCommonTopic.jsp?id=10560">中国自然资源学会第六次全国会员代表大会暨学术年会通知（第2号）（09.10）</a></td></tr></table><table width=43 border=0 cellspacing=0 cellpadding=0><tr><td height=6></td></tr></table>' +'<table width=136 border=0 cellspacing=0 cellpadding=0><tr><td width=16 height=20 valign=top><img src="/images/index_18.gif" mce_src="images/index_18.gif" width=12 height=12 vspace=5></td><td width=120><a title="“自适应空间信息可视化理论、技术与方法”研讨会征文通知（09.04）" target="_blank" href="moban/showCommonTopic.jsp?id=10557" mce_href="moban/showCommonTopic.jsp?id=10557">“自适应空间信息可视化理论、技术与方法”研讨会征文通知（09.04）</a></td></tr></table><table width=43 border=0 cellspacing=0 cellpadding=0><tr><td height=6></td></tr></table>' +'<table width=136 border=0 cellspacing=0 cellpadding=0><tr><td width=16 height=20 valign=top><img src="/images/index_18.gif" mce_src="images/index_18.gif" width=12 height=12 vspace=5></td><td width=120><a title="中国科学院地理科学与资源研究所会计岗位招聘启事（09.03）" target="_blank" href="moban/showCommonTopic.jsp?id=10556" mce_href="moban/showCommonTopic.jsp?id=10556">中国科学院地理科学与资源研究所会计岗位招聘启事（09.03）</a></td></tr></table><table width=43 border=0 cellspacing=0 cellpadding=0><tr><td height=6></td></tr></table>' strArray[0]='' +'<table width=136 border=0 cellspacing=0 cellpadding=0><tr><td width=16 height=20 valign=top><img src="/images/index_18.gif" mce_src="images/index_18.gif" width=12 height=12 vspace=5></td><td width=120><a title="水问题论坛系列讲座——2009年第7讲（总第90讲）（09.01）" target="_blank" href="moban/showCommonTopic.jsp?id=10554" mce_href="moban/showCommonTopic.jsp?id=10554">水问题论坛系列讲座——2009年第7讲（总第90讲）（09.01）</a></td></tr></table><table width=43 border=0 cellspacing=0 cellpadding=0><tr><td height=6></td></tr></table>' +'<table width=136 border=0 cellspacing=0 cellpadding=0><tr><td width=16 height=20 valign=top><img src="/images/index_18.gif" mce_src="images/index_18.gif" width=12 height=12 vspace=5></td><td width=120><a title="2009’中国科学院地理信息技术自主创新论坛暨SuperMap GIS技术大会（09.01）" target="_blank" href="moban/showCommonTopic.jsp?id=10553" mce_href="moban/showCommonTopic.jsp?id=10553">2009’中国科学院地理信息技术自主创新论坛暨SuperMap GIS技术大会（09.01）</a></td></tr></table><table width=43 border=0 cellspacing=0 cellpadding=0><tr><td height=6></td></tr></table>' +'<table width=136 border=0 cellspacing=0 cellpadding=0><tr><td width=16 height=20 valign=top><img src="/images/index_18.gif" mce_src="images/index_18.gif" width=12 height=12 vspace=5></td><td width=120><a title="资源与环境信息系统国家重点实验室2009年招聘“有限元法”方向客座研究人员（08.07）" target="_blank" href="moban/showCommonTopic.jsp?id=10532" mce_href="moban/showCommonTopic.jsp?id=10532">资源与环境信息系统国家重点实验室2009年招聘“有限元法”方向客座研究人员（08.07）</a></td></tr></table><table width=43 border=0 cellspacing=0 cellpadding=0><tr><td height=6></td></tr></table>' /* showId=Math.floor(Math.random()*1); tempStr=strArray[showId]; strArray[showId]=strArray[0]; strArray[0]=tempStr; */ </SCRIPT> <SCRIPT> var timer; document.write('<div id="icefable1" style="width:136;">' +'<table width=130; border=0 cellspacing=0 cellpadding=0>' +'<tr><td width=130; height=120 style="padding-top:2px" mce_style="padding-top:2px" valign=top>'+strArray[1]+'</td></tr>' +'<tr><td width=130; height=120 style="padding-top:2px" mce_style="padding-top:2px" valign=top>'+strArray[0]+'</td></tr>' +'</table>' +'</div>' +'<div id="icefable2" style="position:absolute;visibility:hidden" mce_style="position:absolute;visibility:hidden"></div>'); /* var marqueesHeight=132; var stopscroll=false; icefable1.scrollTop=0; */ with(icefable1){ /* style.width=0; style.height=marqueesHeight; style.overflowX="visible"; style.overflowY="hidden"; noWrap=true; */ onmouseover=function(){clearInterval(timer);}; onmouseout=function(){timer = setInterval("move()",100);}; } /* var preTop=0; var currentTop=0; var stoptime=0; */ function init_srolltext(){ icefable2.innerHTML=""; icefable2.innerHTML+=icefable1.innerHTML; icefable1.innerHTML=icefable2.innerHTML+icefable2.innerHTML; timer = setInterval("move()",100); } function move(){ if(document.getElementById("icefable2").scrollTop >= document.getElementById("icefable1").offsetHeight) document.getElementById("icefable2").scrollTop -= (document.getElementById("icefable1").offsetHeight - 1); else ocument.getElementById("icefable2").scrollTop += 1; } init_srolltext(); function scrollUp(){ if(stopscroll==true) return; currentTop+=4; if(currentTop==132) { stoptime+=4; currentTop-=0; } else { preTop=icefable1.scrollTop; icefable1.scrollTop+=4; if(preTop==icefable1.scrollTop){ icefable1.scrollTop=icefable2.offsetHeight-marqueesHeight; icefable1.scrollTop+=4; } } } //setTimeout("init_srolltext()",2000); //init_srolltext(); </SCRIPT>