js滑鼠懸浮水平彈性伸縮的導航選單

admin發表於2017-04-08
JS

本章節分享一段程式碼例項，它實現了滑鼠懸浮導航水平伸縮的功能。

下面就給出程式碼，並進行詳細的分析，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
*{
  margin:0px;
  padding:0px;
}
body{
  background:#fff;
}
.naver{
  list-style-type:none;
  width:700px;
  overflow:hidden;
  margin:100px auto 0;
}
.naver li{
  width:100px;
  height:50px;
  overflow:hidden;
  font-size:16px;
  text-align:center;
  cursor:pointer;
}
.naver li a,.naver li a:hover{
  display: block;
  width:100px;
  height:50px;
  line-height:50px;
  color:#FFF;
  text-decoration:none;
}
.co1{background:#649e37}
.co2{background:#028fbc}
</style>
<script type="text/javascript">
window.onload = function() {
  var oUl = document.getElementById("nav");
  var aLi = oUl.getElementsByTagName("li");
  var index = 0;
  for (index = 0; index < aLi.length; index++) {
    aLi[index].timer = null;
    aLi[index].speed = 0;
    aLi[index].onmouseover = function() {
      startMove(this, 250);
    };
    aLi[index].onmouseout = function() {
      startMove2(this, 100);
    };
  }
};
function startMove(obj, iTarget) {
  if (obj.timer) {
    clearInterval(obj.timer);
  }
  obj.timer = setInterval(function() {
    doMove(obj, iTarget);
  }, 30)
};
function doMove(obj, iTarget) {
  obj.speed += 3;
  if (Math.abs(iTarget - obj.offsetWidth) < 1 && Math.abs(obj.speed) < 1) {
    clearInterval(obj.timer);
    obj.timer = null;
  }
  else {
    if (obj.offsetWidth + obj.speed >= iTarget) {
      obj.speed *= -0.7;
      obj.style.width = iTarget + "px";
    }
    else {
      obj.style.width = obj.offsetWidth + obj.speed + "px";
    }
  }
};
function startMove2(obj, iTarget) {
  if (obj.timer) {
    clearInterval(obj.timer);
  }
  obj.timer = setInterval(function() {
    doMove2(obj, iTarget);
  }, 30)
};
function doMove2(obj, iTarget) {
  obj.speed -= 3;
  if (Math.abs(iTarget - obj.offsetWidth) < 1 && Math.abs(obj.speed) < 1) {
    clearInterval(obj.timer);
    obj.timer = null;
  }
  else {
    if (obj.offsetWidth + obj.speed <= iTarget) {
      obj.speed *= -0.7;
      obj.style.width = iTarget + "px";
    }
    else {
      obj.style.width = obj.offsetWidth + obj.speed + "px";
    }
  }
};
</script>
</head>
<body>
<ul id="nav" class="naver">
  <li class="co1"><a href="#">螞蟻部落一</a></li>
  <li class="co2"><a href="#">螞蟻部落二</a></li>
  <li class="co1"><a href="#">螞蟻部落三</a></li>
  <li class="co2"><a href="#">螞蟻部落四</a></li>
  <li class="co1"><a href="#">螞蟻部落五</a></li>
</ul>
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

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

（2）.var oUl = document.getElementById("nav")，獲取id屬性值為nav的元素物件。

（3）.var aLi = oUl.getElementsByTagName("li")，獲取oUl下的li元素集合。

（4）.var index = 0，生命一個變數病賦初值為0，在for迴圈中使用。

（5）.for (index = 0; index < aLi.length; index++){}，遍歷li元素集合中的每一個元素。

（6）.aLi[index].timer = null，為當前的li元素物件新增一個timer屬性並賦初值為null，用作定時器函式的標識。

（7）.aLi[index].speed = 0，初始化元素的伸縮速度。

（8）.aLi[index].onmouseover = function() {

  startMove(this, 250);

}，為當前li元素註冊onmouseover事件處理函式。

當滑鼠懸浮的時候就會執行此函式，然後呼叫startMove()函式，第一個引數this就是當前li元素，第二個引數是元素伸展的最大寬度。

（9）.aLi[index].onmouseout = function() {

  startMove2(this, 100);

}為當前li元素註冊onmouseout事件處理函式。

當滑鼠懸浮的時候就會執行此函式，然後呼叫startMove2()函式，第一個引數this就是當前li元素，第二個引數是元素收縮的最小寬度。

（10）.function startMove(obj, iTarget) {

  if (obj.timer) {

    clearInterval(obj.timer);

  }

  obj.timer = setInterval(function() {

    doMove(obj, iTarget);

  }, 30)

}，此函式實現了li元素的伸展或者收縮效果，第一個引數是一個元素物件，第二個引數是目標尺寸。

首先判斷當前有定時器函式的執行，如果有，那麼就停止當前定時器函式的執行，否則就會出現多個定時器函式重疊執行的情況。

最後，開始一個新的定時器函式的執行。

（11）.function doMove(obj, iTarget) {}，此方法實現了具有彈性效果的伸展運動，第一個引數是元素物件，第二個引數是目標值。

（12）.obj.speed += 3，每一次執行，速度值就會加3。

（13）.if (Math.abs( iTarget - obj.offsetWidth)< 1 && Math.abs(obj.speed) < 1) {

  clearInterval(obj.timer);

  obj.timer = null;

}，如果當前的目標值減去元素當前的寬度值小於1，並且速度的值小於1

那麼就停止定時器函式的執行，也就是伸展任務完成。

（14）.else {

  if (obj.offsetWidth + obj.speed >= iTarget) {

    obj.speed *= -0.7;

    obj.style.width = iTarget + "px";

  }

  else {

    obj.style.width = obj.offsetWidth + obj.speed + "px";

  }

}，如果不滿足上一步驟的條件，那麼進行如下判斷:

如果當前寬度加上當前速度大於目標寬度的話，就將速度轉換為負數，並乘以0.7（不能直接乘以-1，否則的話li元素寬度又會回到原來的尺寸）.最後將元素的寬度直接設定為目標尺寸。

如果上面的條件也不滿足的話，就在原來寬度基礎上加上當前的速度,由於速度是累積的，所以速度會越來越快。

第13和14步實現了彈性效果，雖然程式碼介紹完畢，不少朋友可能還沒有明白會什麼會有彈性效果，下面做一下說明:

當開始運動的時候，元素寬度會越來越快的進行伸展。

到達一個臨界點（當前的寬度加上當前速度要大於等於目標尺寸）之後，元素寬度裡面設定為目標寬度，這時候速度也變成了負數，但是由於是乘以-0.7，所以元素的寬度在彈性變化的時候就不能夠收縮到最初的尺寸，於是當元素再次伸展到目標尺寸的時候，速度就比上一次要小，因為執行obj.speed += 3的次數少了。如此往復（往復也就實現了彈性效果）最終會滿足13部的判斷條件。

二.相關閱讀:

（1）.getElementsByTagName()可以參閱document.getElementsByTagName()一章節。

（2）.onmouseover事件可以參閱javascript mouseover事件一章節。

（3）.onmouseout事件可以參閱javascript mouseout事件一章節。

（4）.setInterval()可以參閱setInterval()一章節。

（5）.Math.abs()可以參閱javascript Math.abs()一章節。

（6）.offsetWidth可以參閱js offsetWidth一章節。

相關文章