js 实现无缝滚动 兼容IE和FF
js 实现无缝滚动 兼容IE和FF
发布时间:2016-12-30 来源:查字典编辑
摘要:原理解析:1、首先给容器设定高度或宽度,比如ul,设置ul高40px;overflow:hidden;2、容器高度设定后,内容的高度超出40...

原理解析:

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><></style><style bogus="1">li{ height:20px; mar}</style>

</head>

<body>

<div>

<ul id="list">

<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"><></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教程学习
编程开发子分类