JavaScript实现无缝滚动新闻的两种方案与代码示例

新闻滚动效果的两种实现方案

近期需要实现一个滚动新闻的功能，经过查阅相关资料，发现目前主要有两种基本的实现方式：

第一种方式是使用Marquee标签。关于该标签的使用，此前已转载过一篇较为详细的文章。其优势在于使用便捷，但缺点在于该标签逐渐被主流浏览器弃用，许多现代浏览器不再支持。例如在IE8环境下，若使用XHTML4.0的loose.dtd声明则能正常显示，但若移除该dtd声明反而无法正常工作。

第二种方式是采用Div结合JavaScript的方法。这种方案的优势在于能够兼容绝大多数浏览器，且在可预见的未来内能保持稳定的运行效果。此外，利用Div布局可以充分利用现有的CSS资源，实现更多视觉效果。其不足之处在于需要开发者具备一定的编程经验和耐心。

使用JavaScript配合Div实现滚动的核心原理基本一致，主要依赖scrollTop属性和offsetHeight属性来驱动移动效果。通常的做法是构建两个内容相同的Div，通过拼接这两个Div的内容来形成无限循环滚动的视觉效果。以下提供了两份示例代码：第一份为实际运行有效的代码；第二份虽未进行实测，但源自网络摘取，理论上应可运行，此处列出以供对比参考。

基于Div与JavaScript的无缝滚动实现

第一份代码示例

<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%>&nbsp; <%=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>