javascript緩衝運動框架程式碼分析

antzone發表於2017-04-17
JavaScript框架

關於緩衝運動框架在大量的特效中都有應用，比如線上客服，點選回到網頁頂部等等，具有良好的人性化視覺效果，下面就詳細分析一段例項程式碼，希望能夠給有此方面需求的朋友帶來一定的幫助。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>運動框架程式碼-螞蟻部落</title>
<style type="text/css">
#odiv{
  position:absolute;
  width:200px;
  height:100px;
  background:red;
  left:10px;
  border:1px solid #333;
}
input{
  margin-top:200px;
}
</style>
<script type="text/javascript"> 
window.onload=function(){
  var odiv=document.getElementById('odiv');  
  var obt=document.getElementById("bt");
   
  obt.onclick=function(){
     move(odiv,"left",600,move);
  }
}
function GetCurrentStyle(obj, prop){      
  if(obj.currentStyle){         
    return obj.currentStyle[prop];      
  }       
  else if(window.getComputedStyle){                
    return window.getComputedStyle(obj,null)[prop];      
  }       
  return null;    
}
function move(obj,prop,target){ 
  var dt=null;
  var speed=0;
  var ol=0; 
  dt=setInterval(function(){ 
    ol=parseInt(GetCurrentStyle(obj,prop)); 
    if(ol>=target){ 
      clearInterval(dt); 
    }
    else{ 
      speed=(target-ol)/8; 
      speed>0?speed=Math.ceil(speed):speed=Math.floor(speed);  
      obj.style[prop]=ol+speed+"px"; 
    } 
  },30); 
} 
</script>
</head>
<body>
<div id="odiv"></div>
<input type="button" value="點選開始運動" id="bt" />
</body>
</html>

以上程式碼實現了緩衝運動效果，當點選按鈕的時候，div可以運動起來，並且運動不是勻速的，而是具有緩衝效果，下面介紹一下此效果的實現過程。

一.實現原理:

當點選按鈕的時候，可以執行move()函式，此函式可以使用定時器函式setInterval()來不斷的呼叫函式，以實現運動效果，在定時器呼叫的函式中，使用GetCurrentStyle()函式可以獲取物件的當前left屬性值，如果當前的left屬性值大於等於設定的目標值，則停止定時器函式的執行，否則就通過當前的left屬性值和目標值不斷設定運動的速度，然後再設定物件的left屬性值，這樣就實現了緩衝運動框架效果。

二.程式碼註釋:

1.window.onload=function(){}，當文件內容完全載入完成再去執行函式中的程式碼。

2.var odiv=document.getElementById('odiv')，獲取id屬性值為odiv的元素物件。

3.var obt=document.getElementById("bt")，獲取id屬性值為bt的與元素物件。

4.obt.onclick=function(){}，為obt註冊onclick事件處理函式。

5.move(odiv,"left",600,move)，呼叫函式。

6.function GetCurrentStyle(obj, prop) {}，此哈數可以獲取指定元素指定樣式屬性的屬性值，在相關內容中會有極少。

7.function move(obj,prop,target){}，實現緩衝運動的函式，具有三個引數，obj是要設定樣式屬性的物件元素，prop是要進行設定的屬性名稱，target就是屬性要達到的目標值，不帶單位。

8.var dt=null;宣告一個變數，後面會用作setInterval()定時器函式的返回值。

9.var speed=0，宣告一個變數，用於儲存速度值。

10.var ol=0，宣告一個變數，用於儲存指定屬性的當前屬性值。

11.dt=setInterval(function(){}，30），用定時器函式每隔30毫秒呼叫一次function(){}函式。

12. ol=parseInt(GetCurrentStyle(obj,prop))，獲取當前元素的指定樣式屬性的屬性值，並且使用parseInt()函式將其轉換為整數。

13.if(ol>=target)，判斷是否大於等於目標值。

14.clearInterval(dt)，停止定時器函式的執行。

15.speed=(target-ol)/8，設定當前運動速度，由於每一ol值都不同，也就實現了speed值的不同，那麼運動速度就會出現緩衝效果。

16.speed>0?speed=Math.ceil(speed):speed=Math.floor(speed)，對速度進行舍入操作。

17.obj.style[prop]=ol+speed+"px"，設定元素的指定屬性的style樣式值。

三.相關閱讀:

1.window.onload=function(){}可以參閱window.onload用法詳解一章節。

2.GetCurrentStyle()可以參閱js如何獲取非內部取樣式表中定義的屬性值一章節。

]3.setInterval()函式可以參閱setInterval()一章節。

4.parseInt()函式可以參閱JavaScript parseInt()一章節。

5.Math.ceil()函式可以參閱JavaScript Math.ceil()一章節。

6.Math.floor()函式可以參閱JavaScript Math.floor()一章節。

相關文章