js 实现无缝滚动 兼容IE FF,大家可以看看。
原理解析:
1、首先给容器设定高度或宽度,比如ul,设置ul高40px;overflow:hidden;
2、容器高度设定后,内容的高度超出40px,超过部分溢出,被隐藏,scrollTop属性可用,这一点可以用overflow:scroll来看效果;
3、改变容器的scrollTop(上下滚动)属性的值,让内容上下移动一个节点的位置(滚动的原理);
4、到滚动的高度scrollTop大于或等于要滚动节点的高度时,设置scrollTop=0,并把把子节点树中的第一个移动到最后,重新开始滚动,无间断循环滚动效果就出现了。
下面是HTML代码:
<script>
// 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);
};
</script>
<!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>
<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 实现无缝滚动 兼容IE FF,大家可以看看。
JavaScript 瀑布流 吸顶 兼容IE FF Chrome
js新闻上下滚动效果(兼容IE和ff)。
Js 实现的幻灯片效果 兼容 IE FF
兼容IE FF 省级三级联动 兼容IE FF 省级三级联动 兼容IE FF 省级三级联动 兼容IE FF 省级三级联动
无缝兼容FF和IE的js 跑马灯效果核心代码
实现图片文字,向左,向右,向上,向下无缝滚动,适合广告图片展示 浏览器兼容(IE、FF、Opera、NS、MYIE)
jsencrypt 兼容IE8,Chrome,FF,包括exports.default,Object.defineProperty不兼容问题处理等。
JS 无限极菜单 兼容IE FF 可更改图标
javascript实现动态增加删除表格行(兼容IE FF).docx
ie6 ie7 ff浏览器兼容 border:2px solid #00f; /*IE、ff的属性*/ border:2px solid #090\9; /* IE6/7/8的属性 */ border:2px solid #F90\0; /* IE8支持 */ *border:2px solid #F00; /* IE6、7支持 */ _border:2...
文字间歇向上滚动代码(兼容IE,FF),网上很多都不好用
表格 题头拖动 超出宽度显示省略号(中文亦可) 滚动条 兼容IE,FF,safari
jquery实现区块或链接横向无缝循环滚动,自适应宽度,可随意设置外容器的宽度。高度自适应,兼容IE,FF,CHROME.zip
很简洁,很实用的js拖动层,兼容IE,FF,
兼容IE FF复制粘贴 在IE6、IE7、IE8、FireFox中均测试通过
兼容IE,火狐的日历控件,个人感觉不错,支持多国语言,可惜没中文,要用中文的可以自己该中文