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

时间：2021-09-17 09:38:41|栏目：JavaScript代码|点击：次

原理解析：
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); 
 
};

上一篇：图片加载完成再执行事件的实例

栏目：JavaScript代码

下一篇：JavaScript中出现乱码的处理心得

本文标题：js 实现无缝滚动兼容IE和FF

本文地址：http://www.codeinn.net/misctech/175581.html

更多JavaScript代码

JavaScript代码

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

阅读排行

推荐教程

JavaScript代码

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

阅读排行

推荐教程

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