js不間斷滾動的簡單教程

竹林書屋@ 2012-04-14

展開全文

內(nèi)容不間斷向左滾動，相當于不斷向右移動滾動條，內(nèi)容向左滾動。

要點一：scrollLeft

使用： id.scrollLeft

例如下面的簡單的例子，當文字向左滾動的時候，就可以看到滾動條在向右移動

要點二：setInterval

使用：var timer = setInterval(func,100);

每隔多長時間，執(zhí)行一次

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www./1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標題文檔</title>
<style>
body,div{margin:0;padding:0;}
.wrapper{width:200px; height:50px; line-height:30px; overflow-x:scroll; overflow-y:hidden; border:1px solid #ccc;}
.w1{width:400px;}
</style>
</head>

<body>

</body>
</html>
復(fù)制代碼

要點三：offsetWidth 對象的可見寬度，包括滾動條等邊線，會隨窗口的顯示大小改變
要點四：innerHTML 設(shè)置或獲取位于對象起始和結(jié)束標簽內(nèi)的HTML

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標題文檔</title>
<style>

</style>
</head>

<body>

function scroll(){
var a = document.getElementById("box");

    if(a.scrollLeft >= c2.offsetWidth){
      a.scrollLeft=0;
    }else{
      a.scrollLeft++;
    }
}
var timer = setInterval(scroll,60);
</script>

</body>
</html>
復(fù)制代碼

說明：
讓box的scrollLeft++，就可以向左滾動。要做到一直不間斷向左滾動，需要做判斷，如果scrollLeft的值等于或大于c2的寬度時，把scrollLeft的值設(shè)為0，這樣就會一直循環(huán)。
把id為c1的內(nèi)容賦予c2，這樣可以在滾動的時候肉眼就會看不到變化

現(xiàn)在已經(jīng)可以滾動了，下面加上鼠標移上滾動停止，鼠標移出，滾動繼續(xù)的效果。

現(xiàn)在是向左滾動，如果向右滾動，可以用如下代碼
if(a.scrollLeft <= 0){
a.scrollLeft+=c1.offsetWidth;
}else{
a.scrollLeft--;
}
當元素左滾動距離小于0時，讓他的左滾動距離為一半的寬度，否則讓左滾動的值--

要點五：clearInterval 取消由 setInterval() 設(shè)置的 timeout

c1.onmouseover = function(){
clearInterval(timer);
}
c1.onmouseout = function(){
timer = setInterval(scroll,60);
}
在上面的代碼中現(xiàn)加上這兩行，就可以鼠標移上停止?jié)L動，鼠標移出滾動繼續(xù)了。

雖然有點啰嗦，但是現(xiàn)在可以實現(xiàn)控制左右無縫滾動的效果了，

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標題文檔</title>
<style>

body,div{margin:0;padding:0;}
body{padding:20px;}
#box{width:300px; height:50px; line-height:30px; overflow-x:scroll; overflow-y:hidden; border:1px solid #ccc; float:left; margin:0 10px; display:inline;}
#c{width:800px;}
#c1,#c2{width:400px;float:left;}
#prev,#next{width:50px; height:50px; line-height:50px; text-align:center; background:#ccc; cursor:pointer; float:left;}
.wrap{width:500px;}

</style>
</head>

<body>

function scroll_l(){

        if(a.scrollLeft >= c1.offsetWidth){
            a.scrollLeft=0;
        }else{
            a.scrollLeft++;
        }

}

function scroll_r(){

        if(a.scrollLeft <= 0){
            a.scrollLeft+=c1.offsetWidth;
        }else{
            a.scrollLeft--;
        }

}

timer = setInterval(scroll_l,60);

    a.onmouseover = function(){
      clearInterval(timer);
    }
    a.onmouseout = function(){
        timer = setInterval(scroll_l,60);
    }

    prev.onclick = function(){
    clearInterval(timer);
      change(0);
    }
    next.onclick = function(){
    clearInterval(timer);
      change(1)
    }

    function change(r){

        if(r==0){
            timer = setInterval(scroll_l,60);
          a.onmouseout = function(){
          timer = setInterval(scroll_l,60);
        }
        }
        if(r==1){
            timer = setInterval(scroll_r,60);
          a.onmouseout = function(){
          timer = setInterval(scroll_r,60);
        }
        }

    }