JavaScript 緩衝運動

admin發表於2018-11-21
JavaScript

元素緩衝運動比勻速運動更為美觀，顯得更為有張力和彈性，對於瀏覽者來說可能會產生更好的效果，留住使用者的可能性也就更大，下面就通過程式碼例項簡單介紹一下如何實現此效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div {
  width:100px;
  height:50px;
  background:#0000FF;
  margin:10px;
}
</style>
<script type="text/javascript">
window.onload=function(){
  var oDiv=document.getElementsByTagName('div');
  for(var i=0;i<oDiv.length;i++) {
    oDiv[i].timer=null;           
    oDiv[i].onmouseover=function(){
      move(this,400);        
    }
    oDiv[i].onmouseout = function () {
      move(this, 100);
    }
  }
};
function move(div,end) {
  clearInterval(div.timer);
  div.timer=setInterval(function(){
    var speed=(end-div.offsetWidth) / 5;      
    speed=speed>0?Math.ceil(speed):Math.floor(speed);   
    if(div.offsetWidth==end) { 
      clearInterval(div.timer);
    }
    else {
      div.style.width=div.offsetWidth+speed+'px';   
    }
  }, 30)
}
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>

一.程式碼註釋:

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

（2）.var oDiv=document.getElementsByTagName('div')，獲取div物件集合。

（3）.for(var i=0;i<oDiv.length;i++){}，遍歷div物件集合中的每一個div元素。

（4）.oDiv.timer=null，為div新增一個自定義屬性timer，並賦值null，存放setInterval()返回值。

（5）.oDiv.onmouseover=function(){move(this,400);}，為div註冊mouseover事件處理函式。

（6）.oDiv.onmouseout=function(){move(this,100);}，為div註冊mouseout事件處理函式。

（7）.function move(div,end) {}，緩衝運動的核心，第一個引數是div物件，第二個是最終寬度。

（8）.clearInterval(div.timer)，停止當前div定時器的執行，沒有這段程式碼，可能導致運動速度疊加。

（9）.div.timer=setInterval(function(){},30)，每隔毫秒執行一次匿名函式。

（10）.var speed=(end-div.offsetWidth)/5，設定運動"速度"，這裡的速度其實就是寬度增加或者減少的幅度，隨著運動的進行，speed的值也在不斷變化。

（11）.speed=speed>0?Math.ceil(speed):Math.floor(speed)，一個數學運算，這裡就不介紹。

（12）.if(div.offsetWidth==end){clearInterval(div.timer);}，達到目標寬度，就停止定時器函式的執行。

（13）.div.style.width=div.offsetWidth+speed+'px'，否則繼續不斷設定div的寬度。

二.相關閱讀:

（1）.Math.ceil()參閱JavaScript Math.ceil()一章節。

（2）.Math.floor()參閱JavaScript Math.floor()一章節。 

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

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

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

相關文章