水平伸縮動畫導航選單實現詳解

antzone發表於2017-04-12
動畫

本章節分享一個簡單的導航選單實現過程，需要的朋友可以做一下參考。

當滑鼠懸浮於導航選單之上時候，選單會出現水平伸縮效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#con div {
  width: 100px;
  margin: 5px 0 5px 0;
  font-size: 9pt;
  height: 23px;
  color: white;
}
</style>
<script>
function $(e) {
  return document.getElementById(e);
}
function roulMenu(e, maxW, minW) {
  var divs = $(e).getElementsByTagName('div');
  for (var index = 0; index < divs.length; index++) {
    (function (index) {
      var tims, timss;
      divs[index].onmouseover = function () {
        var self = this;
        clearInterval(timss);
        tims = setInterval(function () {
          if (self.offsetWidth < maxW) {
            self.style.width = self.offsetWidth + 5 + 'px';
          }
          else {
            clearInterval(tims);
          }
        }, 10);
      }
      divs[index].onmouseout = function () {
        var self = this;
        clearInterval(tims);
        timss = setInterval(function () {
          if (self.offsetWidth > minW) {
            self.style.width = self.offsetWidth - 5 + 'px';
          }
          else {
            clearInterval(timss);
          }
        }, 10);
      }
    })(index);
  }
}
window.onload = function () {
  roulMenu('con', 200, 100);
}     
</script>
</head>
<body>
<div id="con">
  <div style="background-color:red">紅色選單</div>
   <div style="background-color:green">綠色選單 </div>
   <div style="background-color:blue">藍色</div>
   <div style="background-color:yellow">黃色</div>
   <div style="background-color:pink">這是什麼色</div>
   <div style="background-color:orange">桔色</div>
   <div style="background-color:black">黑色超酷</div>
 </div>
</body>
</html>

上面的程式碼實現了動畫效果，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.function $(e) {

  return document.getElementById(e);

}，返回id屬性值為e的元素物件。

（2）.function roulMenu(e, maxW, minW) {}，第一個引數規定選單父元素的id屬性值，第二個引數規定選單的最大寬度，第三個引數規定選單的最小寬度。

（3）.var divs = $(e).getElementsByTagName('div')，獲取父元素下所有的div元素集合。

（4）.for (var index = 0; index < divs.length; index++) ，遍歷div集合中的麼一個元素。

（5）.(function (index) {})(index),通過閉包的方式來為元素註冊事件處理函式。

（6）.var tims, timss，宣告兩個變數用作定時器函式的標識。

（7）.divs[index].onmouseover = function () {}，為元素註冊onmouseover事件處理函式。

（8）.var self = this，把當前div元素的引用賦值給變數self。

（9）.clearInterval(timss)，停止上一個動畫，防止滑鼠連續懸浮於同一個選單，造成定時器函式疊加執行。

（10）.tims = setInterval(function () {

  if (self.offsetWidth < maxW) {

    self.style.width = self.offsetWidth + 5 + 'px';

  }

  else {

    clearInterval(tims);

  }

}, 10)，通過定時器函式的方式設定元素的寬度。

二.相關閱讀:

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

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

（3）.clearInterval()可以參閱clearInterval()一章節。

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

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

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

相關文章