操作Dom节点实现间歇滚动新闻
作者:ymyang 来源:蓝色理想 发布时间:2009-10-16 20:51:00
标签:Dom,滚动,新闻
处理页面中的间歇无缝滚动新闻的时候,最常见的方法就是将滚动区内容复制追加一份,然后通过控制和判断滚动块的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>
效果:
运行代码框
0
投稿
猜你喜欢
- Inserted 表中的行是触发器表中新行的副本。 语法 返回所有列 INSERT INTO [tableName] ([columnNam
- ASP实例代码,利用SQL语句动态创建Access表。留作参考,对在线升级数据库有用处.<% nowtime = now()
- 我们可以利用 Cookie collection 来刪除客户端的Cookies: <%
- 摘 要:本文讨论了Visual Basic应用程序访问SQL Server数据库的几种常用的方法,分别说明了每种方法的内部机理并给出了每种方
- 可以使用 XDR(简化 XML-Data)架构创建关系数据的 XML 视图。然后可以使用 XPath 查询来查询这些视图。这类似于使用 CR
- 在ASP中,如何创建DSN? 见下:<HTML><HEAD><META&n
- 对网站的LOGO设计做了一些归纳,希望得到批评,发现写的太长了,又不忍心删减,就分成两部分了,第一部分是有关设计基础的。第二部分是关于网站L
- 在应用系统中,尤其在联机事务处理系统中,对数据查询及处理速度已成为衡量应用系统成败的标准。而采用索引来加快数据处理速度也成为广大数据库用户所
- 阅读上一章:Chapter 4 引用互动性一直是互联网的重点,让使用者与网站能够交换信息,彼此沟通.表单使我们能够有组织的,使用同一方式的从
- SQL Server数据库查询优化的常用方法总结:本文中,abigale代表查询字符串,ada代表数据表名,alice代表字段名。技巧一:问
- 这是一段点击复制的代码,现在我的页面里不仅有1个链接需要用到这段代码。请哪位好心人指教一下应该怎么用ID对应的方式来改写这段js,使它实现一
- 去掉数据重复 增加两个字段 alter TABLE T_Employee Add FSubCompany VARchar(20); ALTE
- 对于许多想学习JavaScript的朋友来说,无疑如何选择入门的书籍是他们最头疼的问题,或许也是他们一直畏惧,甚至放弃学习JavaScrip
- 方法一:利用Cookies对象 因为Cookies对象把变量的值保存在浏览器客户端,所以可以根据Cookies保存的IsVoted的值来判断
- 我们知道在超级链接的title属性中,是不支持html代码的,我们只能使用文本来处理提示信息。当然借助js可以做出很好的效果。这里讲一下如何
- 数据列类型与查询效率选用适当的数据列类型有助于提高查询命令的执行速度,下面是几点关于如何选择合适数据列类型的建议:尽量选用尺寸较小的数据列。
- 一个网站信息结构需要表现给用户看,这样用户才能知道当前是在哪儿,才有可能去猜测某个内容可能会在哪儿。如何表现网站的信息结构给用户呢?用导航。
- 本文中介绍了一个MySQL的存储过程,其中涉及Cursor的使用,示例如下:CREATE PROCEDURE `justifyGroupNu
- win7 +Navicat Lite 9+ VMware7在VMware中安装openSUSE11.x mysql5 Navicat Lit
- Jon Wiley, User Experience Designer for Google Apps, outlined some of