js不間斷滾動的簡單教程

內容不間斷向左滾動,相當於不斷向右移動滾動條,內容向左滾動。

 

要點一:scrollLeft   

使用: id.scrollLeft

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

 

要點二:setInterval     

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

每隔多長時間,執行一次

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標題文檔</title>
<style>
body,p{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>

<p id="s" class="wrapper">
  <p class="w1">內容1內容2內容3內容4內容5內容6內容7</p>
</p>

<script>
  function scroll(){
    var a = document.getElementById("s");
    a.scrollLeft++;
  }
  var timer = setInterval(scroll,50);
</script>

</body>
</html>
復制代碼

要點三:offsetWidth     對象的可見寬度,包括滾動條等邊線,會隨窗口的顯示大小改變
要點四:innerHTML  設置或獲取位於對象起始和結束標簽內的HTML

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

body,p{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;}
#c{width:800px;}
#c1,#c2{width:400px;float:left;}

</style>
</head>

<body>

<p id="box">
  <p id="c">
    <p id="c1">內容1內容2內容3內容4內容5內容6內容7</p>
    <p id="c2"></p>
  </p>
</p>

<script>
  var c1 = document.getElementById("c1");
  var c2 = document.getElementById("c2");
  c2.innerHTML = c1.innerHTML;

  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>
復制代碼
 
說明:
讓box的scrollLeft++,就可以向左滾動。要做到一直不間斷向左滾動,需要做判斷,如果scrollLeft的值等於或大於c2的寬度時,把scrollLeft的值設為0,這樣就會一直循環。
把id為c1的內容賦予c2,這樣可以在滾動的時候肉眼就會看不到變化
 
現在已經可以滾動瞭,下面加上鼠標移上滾動停止,鼠標移出,滾動繼續的效果。
 
現在是向左滾動,如果向右滾動,可以用如下代碼
if(a.scrollLeft <= 0){
a.scrollLeft+=c1.offsetWidth;
}else{
a.scrollLeft–;
}
 當元素左滾動距離小於0時,讓他的左滾動距離為一半的寬度,否則讓左滾動的值–
 
要點五:clearInterval   取消由 setInterval() 設置的 timeout
 
c1.onmouseover = function(){
clearInterval(timer);
}
c1.onmouseout = function(){
timer = setInterval(scroll,60);
}
在上面的代碼中現加上這兩行,就可以鼠標移上停止滾動,鼠標移出滾動繼續瞭。
 
雖然有點囉嗦,但是現在可以實現控制左右無縫滾動的效果瞭,
 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標題文檔</title>
<style>

body,p{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>

<p class="wrap">

  <p id="prev"><<</p>

    <p id="box">
      <p id="c">
        <p id="c1">內容1內容2內容3內容4內容5內容6內容7</p>
      <p id="c2"></p>
      </p>
    </p>
   
  <p id="next">>></p>
   
</p>

<script>
  var c1 = document.getElementById("c1");
  var c2 = document.getElementById("c2");
  var a = document.getElementById("box");
    var prev = document.getElementById("prev");
    var next = document.getElementById("next");
    var timer    ;
  c2.innerHTML = c1.innerHTML;

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

</script>

</body>
</html>

 

摘自 jingangel

發佈留言