操作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,滚动,新闻
0
投稿

猜你喜欢

  • 四种方法在SQL Server数据库中成批导入数据

    2009-02-19 17:25:00
  • js仿googl拖拽效果

    2007-09-29 13:16:00
  • 简单了解python调用其他脚本方法实例

    2022-12-07 08:53:36
  • go zero微服务实战性能优化极致秒杀

    2023-06-17 03:45:30
  • Python词云的正确实现方法实例

    2021-08-05 10:53:41
  • MYSQL存储过程即常用逻辑知识点总结

    2024-01-21 07:36:36
  • 带例子详解Sql中Union和Union ALL的区别

    2024-01-23 01:45:00
  • Java解析Excel文件并把数据存入数据库

    2024-01-22 10:42:26
  • Python实现交通数据可视化的示例代码

    2022-03-09 13:00:00
  • Windows下MySQL 5.7无法启动的解决方法

    2024-01-26 02:32:31
  • Python爬取网页信息的示例

    2021-02-09 10:43:21
  • Python爬虫爬取商品失败处理方法

    2021-04-11 11:26:31
  • asp中获取内容中所有图片与获取内容中第一个图片的代码

    2011-02-20 10:51:00
  • 什么是gRPC

    2023-01-16 15:23:53
  • python脚本使用阿里云slb对恶意攻击进行封堵的实现

    2021-11-20 16:32:07
  • python 获取一个值在某个区间的指定倍数的值方法

    2023-04-08 17:19:07
  • 详解webpack编译速度提升之DllPlugin

    2024-02-23 20:57:10
  • python 实现兔子生兔子示例

    2022-04-13 05:15:11
  • 超详细mysql left join,right join,inner join用法分析

    2024-01-22 00:21:05
  • Golang并发编程之Channel详解

    2024-05-09 14:58:42
  • asp之家 网络编程 m.aspxhome.com