JavaScript運動框架程式碼例項

螞蟻小編發表於2018-07-02
JavaScript框架

元素的運動效果在大量的場景中都有應用，比較典型的是網站的客服系統，一般都會隨著滾動條運動。

本章節分享一個JavaScript運動框架例項。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#div1 {
  width:100px;
  height:100px;
  background:#0000FF;
  position:absolute;
  left:800px;
  top:100px;
}
#div200 {
  width:1px;
  height:400px;
  background:#FF0000;
  position:absolute;
  left:200px;
}
#div500 {
  width:1px;
  height:400px;
  background:#FF0000;
  position:absolute;
  left:500px;
}
</style>
<script type="text/javascript">
var timer=null;
function move(end) {
  var oDiv=document.getElementById('div1');
  clearInterval(timer);
  timer=setInterval(function(){
    var speed=(end-oDiv.offsetLeft)/5;
    speed=speed>0?Math.ceil(speed):Math.floor(speed);       
    if(Math.abs(end-oDiv.offsetLeft)<=speed) { 
      clearInterval(timer); 
      oDiv.style.left=end+'px';           
    }
    else {
      oDiv.style.left=oDiv.offsetLeft+speed+'px';
    }
  }, 30)
}
window.onload=function(){
  var bt1=document.getElementById("btn1");
  var bt2=document.getElementById("btn2");
   
  bt1.onclick=function(){move(500);}
  bt2.onclick=function(){move(200);}
}
</script>
</head>
<body>
<input type="button" id="btn1" value="到500的位置" />
<input type="button" id="btn2" value="到200的位置" />
<div id="div1"></div>
<div id="div200">200</div>
<div id="div500">500</div>
</body>
</html>

點選相應的按鈕可以讓div移動的指定的位置。

一.程式碼註釋：

（1）.var timer=null，宣告一個變數用來作為定時器函式setInterval()的返回值，這在停止定時器函式執行的時候非常關鍵。

（2）.function move(end) {}，此函式用來實現div的運動效果，引數規定要移動位置，在本程式碼中就是offsetLeft屬性值。

（3）.var oDiv=document.getElementById('div1')，獲取id屬性值為div1的物件。

（4）.clearInterval(timer)，停止定時器函式的執行，這個很重要，否則可能造成多個定時器函式同時執行，造成混亂。

（5）.timer=setInterval(function(){}，30)，使用定時器函式每隔30毫秒執行一次匿名函式，定時器函式的返回值可以作為一個標識，用來作為clearInterval()函式的引數，來停止定時器函式的執行。

（6）.var speed=(end-oDiv.offsetLeft)/5，用來計算div運動的速度，end是要移動到的位置，offsetLeft是div左邊緣距離body的距離。

（7）.speed=speed>0?Math.ceil(speed):Math.floor(speed)，如果speed是大於零的就採用上舍入，小於零就進行下舍入。

（8）.if(Math.abs(end-oDiv.offsetLeft)<=speed)，判斷是否已經到底目的位置，其實offsetLeft的值永遠不可能達到我們規定的值，因為speed的值不可能到達0，極限是1或者-1。

（9）.clearInterval(timer)，停止定時器函式的執行。

（10）.oDiv.style.left=end+'px'，將div的left屬性值設定為規定的值。

（11）.oDiv.style.left=oDiv.offsetLeft+speed+'px'，設定div的left屬性值。

二.相關閱讀：

（1）.Math.ceil()方法參閱javascript Math.ceil()一章節。

（2）.Math.floor()方法參閱javascript Math.floor()一章節。 

（3）.setInterval()方法參閱setInterval()一章節。 

（4）.clearInterval()方法參閱window.clearInterval()一章節。 

（5）.offsetWidth屬性參閱offsetWidth一章節。 

（6）.offsetLeft屬性參閱offsetLeft用法一章節。

相關文章