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></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"></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); };

　　推荐阅读

　　9个javascript语法高亮插件推荐

下面介绍的是一些纯javascript实现的语法高亮插件。英文原文：http://www.webdesignbooth.com/9-useful-javascript-syntax-highlighting-scripts/ 1. SyntaxHighlighter我相信这个插件是我们使用多的，它支持超多>>>详细阅读

本文标题：js 实现无缝滚动兼容IE和FF

地址：http://www.17bianji.com/kaifa2/JS/28431.html

1/2 1

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

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