当前位置：Gxlcms > JavaScript > 利用JavaScript实现新闻滚动效果(实例代码)_javascript技巧

利用JavaScript实现新闻滚动效果(实例代码)_javascript技巧

时间：2021-07-01 10:21:17 帮助过：23人阅读

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

1.使用Marquee标签。这个标签的使用我已经转载了一篇比较详细的文章，这个标签的优点是便于使用，缺点是人们已经逐渐不适用它了，许多浏览器不支持，甚至在IE8想，XHTML4.0的loose.dtd是可以的，而去掉loose.dtd却不行。

2.使用div+javascript的方法。这种方法的好处是可以兼容几乎所有的浏览器，并且在可以预料的时间内仍能稳定运行。并且使用div使得网页可以利用现有的css资源实现很多炫目的效果。缺点是需要一定的编程经验和耐心。

使用javascript+div方式的基本原理是一样的，利用scrollTop属性和offsetheight属性来实现移动效果。一般使用两个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(" "));
%>

<%=content%> <%=date%>

<%
}
%>

第二份代码

代码如下:

利用JavaScript实现新闻滚动效果(实例代码)_javascript技巧

人气教程排行