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

最新推荐文章于 2024-08-07 22:13:00 发布

eddy615

最新推荐文章于 2024-08-07 22:13:00 发布

阅读量531

点赞数

分类专栏： javascript 文章标签： ie delay function xhtml html javascript

本文链接：https://blog.csdn.net/eddy615/article/details/4347512

版权

javascript 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

原理解析：
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> <mce:script type="text/javascript" src="divCycle.js" mce_src="divCycle.js"></mce:script> <mce:style></mce:style><style mce_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> <mce:script type="text/javascript"></mce: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.οnmοuseοver=function(){pause=true;}; container.οnmοuseοut=function(){pause=false;}; setTimeout(start,delay*1000); };

eddy615

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 实现无缝滚动兼容IE&&FF

原理解析： 1、首先给容器设定高度或宽度，比如ul，设置ul高40px;overflow:hidden； 2、容器高度设定后，内容的高度超出40px，超过部分溢出，被隐藏，scrollTop属性可用，这一点可以用overflow:scroll来看效果； 3、改变容器的scrollTop（上下滚动）属性的值，让内容上下移动一个节点的位置（滚动的原理）； 4、到滚动的高度scrollTop大于或等于要
复制链接

扫一扫