繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > js 实现无缝滚动 兼容IE和FF
- Javascript
- 非常不错的不间断循环滚动类 兼容多浏览器
- 完美解决JS中汉字显示乱码问题（已解决）
- 另类调用flash无须激活的方法
- fromCharCode和charCodeAt 方法
- JavaScript方法和技巧大全
- 选择与取消选择不错的应用 js
- javascript中对对层的控制
- 通过js脚本复制网页上的一个表格的不错实现方法
- JavaScript数组的快速克隆(slice()函数)和数组的排序、乱序和搜索(sort()函数)
- slice函数的用法 之不错的应用
- js自带函数备忘 数组
- JavaScript 参考教程
- 经典的解除许多网站无法复制文字的绝招
- 利用JS获取IE客户端IP及MAC的实现好象不可以
- 彻底搞懂JS无缝滚动代码
- 关于Javascript 的 prototype问题。
- 关于JavaScript的gzip静态压缩方法
- JavaScript的目的分析
- 智能表格
- javascript中的对象和数组的应用技巧
Javascript 中的 js 实现无缝滚动 兼容IE和FF
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 438 ::
收藏到网摘: n/a
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">
<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 ([email protected])
@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);
};
评论 (0) All
