管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

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

　　原理解析：

　　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">

　　<head>

<style><!--

　　li{ height:20px; mar}

　　--></style><style bogus="1">li{ height:20px; mar}</style>

　　</head>

　　<body>

　　<div>

　　</ul>

　　</div>

<script type="text/javascript"><!--

　　new simpleScroll("list",20,40,1);

　　// --></script>

　　</body>

　　</html>

　　js源码

复制代码代码如下:

　　// JavaScript Document

　　/*****

　　@author leaves chen ([email protected])

　　*****/

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

　　};

教程首页更多教程

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

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