时间：2020-12-12 14:05:34 | 栏目：JavaScript代码 | 点击：次
最近要实现一个滚动新闻效果，在网上查了一些资料，发现基本的实现方法有两种：
1.使用Marquee标签。这个标签的使用我已经转载了一篇比较详细的文章，这个标签的优点是便于使用，缺点是人们已经逐渐不适用它了，许多浏览器不支持，甚至在IE8想，XHTML4.0的loose.dtd是可以的，而去掉loose.dtd却不行。
2.使用div+javascript的方法。这种方法的好处是可以兼容几乎所有的浏览器，并且在可以预料的时间内仍能稳定运行。并且使用div使得网页可以利用现有的css资源实现很多炫目的效果。缺点是需要一定的编程经验和耐心。
使用javascript+div方式的基本原理是一样的，利用scrollTop属性和offsetheight属性来实现移动效果。一般使用两个div，里面的内容是一样的，然后利用两个div拼接，形成不断循环的效果。下面是我找到的两份示例代码，第一份正是我用的代码，可以运行。第二份我没做测试。写出来是为了做个对比，第二份应该是能用的，因为那是我从网站上摘下来的。
第一份代码
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>