亲宝软件园·资讯

展开

js 实现无缝滚动 兼容IE和FF

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>滚动</title>
<script type="text/javascript" src="divCycle.js" src="divCycle.js"></script>
<style><!--
li{ height:20px; mar}
--></style><style bogus="1">li{ height:20px; mar}</style>
</head>
<body>
<div>
<ul id="list" style="border:1px #ccc solid; overflow:hidden; height:40px; width:100px; margin:0; padding:0; list-style-type:none;">
    <li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</div>
<script type="text/javascript"><!--
new simpleScroll("list",20,40,1);
// --></script>
</body>
</html>

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

加载全部内容

相关教程
猜你喜欢
用户评论