操作Dom节点实现间歇滚动新闻
作者:ymyang 来源:蓝色理想 时间:2009-10-16 20:51:00
处理页面中的间歇无缝滚动新闻的时候,最常见的方法就是将滚动区内容复制追加一份,然后通过控制和判断滚动块的scrollTop来实现滚动停止效果。
其实在很多情况下通过节点操作实现间歇无缝滚动要更加容易些。
代码如下:
<script language="javascript" type="text/javascript">
window.onload=function(){
var o=document.getElementById('box');
window.setInterval(function(){scrollup(o,24,0);},3000);
}
///滚动主方法
///参数:o 滚动块对象
///参数:d 每次滚屏高度
///参数:c 当前已滚动高度
function scrollup(o,d,c){
if(d==c){
var t=getFirstChild(o.firstChild).cloneNode(true);
o.removeChild(getFirstChild(o.firstChild));
o.appendChild(t);
t.style.marginTop="0px";
}else{
c+=2;
getFirstChild(o.firstChild).style.marginTop=-c+"px";
window.setTimeout(function(){scrollup(o,d,c)},20);
}
}
//解决firefox下会将空格回车作为节点的问题
function getFirstChild(node){
while (node.nodeType!=1)
{
node=node.nextSibling;
}
return node;
}
</script>
<ul id="box">
<li>· 新华每日电讯:音乐版权收费像“一团麻” </li>
<li>· 现代快报:人类能否和机器人结婚生孩子? </li>
<li>· 环球:美国,一家亿万富翁俱乐部的破产 </li>
<li>· 现代快报:为让媒体封口倪震欲卖李嘉欣情书 </li>
<li>· 京华时报:北京航空航天大学学生自制火箭升天 </li>
</ul>
效果:
运行代码框
标签:Dom,滚动,新闻
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
3个常用的JS时间代码
2009-03-22 15:29:00
在ie6下的hover伪类的使用
2008-06-01 13:51:00
使用SQL语句 INNER JOIN 联接表
2008-04-27 20:31:00
![](https://img.aspxhome.com/file/UploadPic/20084/27/sql_15s.gif)
MySQL (root@%) does not exist的问题
2011-03-16 15:31:00
asp通过数组给您的文件列表排序
2007-10-22 13:45:00
Google的YSlow——Page Speed(附插件下载)
2009-09-27 12:40:00
![](https://img.aspxhome.com/file/UploadPic/20099/27/page_speed_01-95s.gif)
用Dreamweaver设计限时自动关闭网页
2009-07-10 13:13:00
![](https://img.aspxhome.com/file/UploadPic/20072/200723113358457s.jpg)
asp如何对数组显示和排序?
2009-11-20 18:30:00
用JS实现一个页面两份样式表
2008-07-23 12:37:00
word-wrap同word-break的区别
2007-10-24 20:08:00
Javascript"篱式"条件判断(翻译)
2008-08-01 12:21:00
减少SQL Server死锁的方法
2009-01-05 13:49:00
DIV+CSS设计时容易犯的一些错误
2007-11-13 12:42:00
表单name与id的区别和相似之处
2007-12-13 12:55:00
asp 判断是否为搜索引擎蜘蛛的代码
2011-03-10 11:03:00
怎么样才能让ASP避免被SQL注入啊?
2008-08-08 12:27:00
aspjpeg组件安装问题
2008-09-27 17:52:00
oracle移植到mysql注意事项
2008-12-25 13:09:00
在sql中返回插入的记录的id
2008-12-21 15:54:00
读"设计的3个C"之构图
2008-12-24 13:25:00