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

来源：懂视网责编：小采时间：2020-11-27 21:16:21

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

利用JavaScript实现新闻滚动效果(实例代码)_javascript技巧:最近要实现一个滚动新闻效果，在网上查了一些资料，发现基本的实现方法有两种： 1.使用Marquee标签。这个标签的使用我已经转载了一篇比较详细的文章，这个标签的优点是便于使用，缺点是人们已经逐渐不适用它了，许多浏览器不支持，甚至在IE8想，XHTML4

推荐度：

点击下载本文 文档为doc格式

导读利用JavaScript实现新闻滚动效果(实例代码)_javascript技巧:最近要实现一个滚动新闻效果，在网上查了一些资料，发现基本的实现方法有两种： 1.使用Marquee标签。这个标签的使用我已经转载了一篇比较详细的文章，这个标签的优点是便于使用，缺点是人们已经逐渐不适用它了，许多浏览器不支持，甚至在IE8想，XHTML4

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

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%>

<%
}
%>

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);}

// -->

第二份代码
代码如下:

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

推荐度：

点击下载本文 文档为doc格式

标签：技巧 js 新闻

热门焦点

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

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

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

最新推荐

猜你喜欢

热门推荐