您好,欢迎来到保捱科技网。
搜索
您的当前位置:首页js实现无缝滚动兼容IE和FF_javascript技巧

js实现无缝滚动兼容IE和FF_javascript技巧

来源:保捱科技网


原理解析:
1、首先给容器设定高度或宽度,比如ul,设置ul高40px;overflow:hidden;
2、容器高度设定后,内容的高度超出40px,超过部分溢出,被隐藏,scrollTop属性可用,这一点可以用overflow:scroll来看效果;
3、改变容器的scrollTop(上下滚动)属性的值,让内容上下移动一个节点的位置(滚动的原理);
4、到滚动的高度scrollTop大于或等于要滚动节点的高度时,设置scrollTop=0,并把把子节点树中的第一个移动到最后,重新开始滚动,无间断循环滚动效果就出现了。
html 源码
代码如下:



滚动






  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10



  • new simpleScroll("list",20,40,1);
    // -->



    js源码
    代码如下:
    // JavaScript Document

    /*****
    @author leaves chen (leaves615@gmail.com)
    @copyright 2009
    *****/
    var pause=false;
    var scrollTimeId=null;
    var container=null;
    var lineHeight=null;
    var speed=0;
    var delay=0;
    simpleScroll=function(container1,lineHeight1,speed1,delay1){
    container=document.getElementById(container1);
    lineHeight=lineHeight1;
    speed=speed1;
    delay=delay1;
    //滚动效果
    scrollexc=function(){
    if(pause) return ;
    container.scrollTop+=2;
    var lh=lineHeight||container.getElementsByTagName('li')[0].offsetHeight;
    if(container.scrollTop%lh<=1){
    clearInterval(scrollTimeId);
    fire();
    container.scrollTop=0;
    setTimeout(start,delay*1000);
    }
    };
    //开始滚动
    start=function(){
    var lh=lineHeight||container.getElementsByTagName('li')[0].offsetHeight;
    if (container.scrollHeight - container.offsetHeight >= lh)
    scrollTimeId = setInterval(scrollexc, speed);
    };
    //把子节点树中的第一个移动到最后
    fire=function(){
    container.appendChild(container.getElementsByTagName('li')[0]);
    };
    container.onmouseover=function(){pause=true;};
    container.onmouseout=function(){pause=false;};
    setTimeout(start,delay*1000);
    };

    Copyright © 2019- baoaiwan.cn 版权所有 赣ICP备2024042794号-3

    违法及侵权请联系:TEL:199 18 7713 E-MAIL:2724546146@qq.com

    本站由北京市万商天勤律师事务所王兴未律师提供法律服务