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