js 实现无缝滚动 兼容IE和FF
2009-07-15 00:00
1076 查看
原理解析:
1、首先给容器设定高度或宽度,比如ul,设置ul高40px;overflow:hidden;
2、容器高度设定后,内容的高度超出40px,超过部分溢出,被隐藏,scrollTop属性可用,这一点可以用overflow:scroll来看效果;
3、改变容器的scrollTop(上下滚动)属性的值,让内容上下移动一个节点的位置(滚动的原理);
4、到滚动的高度scrollTop大于或等于要滚动节点的高度时,设置scrollTop=0,并把把子节点树中的第一个移动到最后,重新开始滚动,无间断循环滚动效果就出现了。
html 源码
js源码
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); };
相关文章推荐
- js 实现无缝滚动 兼容IE和FF
- js 实现无缝滚动 兼容IE&&FF
- JS + jQuery 实现元素自动滚动到底部,兼容IE、FF、Chrome
- js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动) 兼容IE/FF/Chrome
- 用js实现的图片在浏览器里面来回滚动效果 <兼容ie和ff>
- js实现的非跨域的iframe高度自适应(完美兼容IE,FF,Opera)
- js阻止浏览器的默认行为以及停止事件冒泡(用JQuery实现回车提交,兼容IE、FF浏览器) 转
- 兼容ie和火狐的js无缝八向滚动特效代码
- 兼容ie和ff的无缝滚动
- js实现兼容IE和FF的上下层的移动
- div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox
- JavaScript 无缝上下左右滚动加定高定宽停顿效果(兼容ie/ff)
- js 实现文字无缝滚动(图片无缝滚动) 兼容各种浏览器
- 兼容ie和ff的无缝滚动
- js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器
- js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器
- js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器
- 无缝循环左右MARQUEE js 兼容FF IE
- js实现有过渡渐变效果的图片轮播相册(兼容IE,ff)