快捷導(dǎo)航

js 實(shí)現(xiàn)無縫滾動(dòng) 兼容IE和FF

更新時(shí)間：2009年07月15日 00:26:27 作者：

js 實(shí)現(xiàn)無縫滾動(dòng) 兼容IE FF，大家可以看看。

原理解析：
1、首先給容器設(shè)定高度或?qū)挾龋热鐄l，設(shè)置ul高40px;overflow:hidden；
2、容器高度設(shè)定后，內(nèi)容的高度超出40px，超過部分溢出，被隱藏，scrollTop屬性可用，這一點(diǎn)可以用overflow:scroll來看效果；
3、改變?nèi)萜鞯膕crollTop（上下滾動(dòng)）屬性的值，讓內(nèi)容上下移動(dòng)一個(gè)節(jié)點(diǎn)的位置（滾動(dòng)的原理）；
4、到滾動(dòng)的高度scrollTop大于或等于要滾動(dòng)節(jié)點(diǎn)的高度時(shí)，設(shè)置scrollTop=0，并把把子節(jié)點(diǎn)樹中的第一個(gè)移動(dòng)到最后，重新開始滾動(dòng)，無間斷循環(huán)滾動(dòng)效果就出現(xiàn)了。
html 源碼

復(fù)制代碼代碼如下:

<!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>滾動(dòng)</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源碼

復(fù)制代碼代碼如下:

// 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; 
    //滾動(dòng)效果 
    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); 
        } 
    }; 
    //開始滾動(dòng) 
    start=function(){ 
        var lh=lineHeight||container.getElementsByTagName('li')[0].offsetHeight; 
            if (container.scrollHeight - container.offsetHeight >= lh) 
                scrollTimeId = setInterval(scrollexc, speed); 
    }; 
    //把子節(jié)點(diǎn)樹中的第一個(gè)移動(dòng)到最后 
    fire=function(){ 
        container.appendChild(container.getElementsByTagName('li')[0]); 
    }; 
    container.onmouseover=function(){pause=true;}; 
    container.onmouseout=function(){pause=false;}; 
    setTimeout(start,delay*1000); 
};