javascript底部具有跟隨效果的橫向導航選單

admin發表於2017-04-08
JavaScript

本章節分享一段程式碼例項，它實現了底部具有跟隨效果的導航選單功能。

下面就給出程式碼，並且詳細介紹一下它的實現過程。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
*{
  margin:0;
  padding:0;
}
body {
  font:12px "\5B8B\4F53",san-serif;
  color:#808080;
  padding-top:6px;
}
a {
  text-decoration:none;
  color:#808080
}
a:hover {
  text-decoration:underline;
  color:#ba2636
}
ul, li { list-style:none; }
#nav{
  padding:41px 0 0 0;
  height:27px;
  width:542px;
  overflow:hidden;
  float:right;
  margin-right:17px;
  position:relative;
}
#nav ul{
  height:27px;
  width:100%;
}
#nav ul li{
  width:67px;
  height:24px;
  float:left;
  padding-right:28px;
  display:inline;
  cursor:pointer;
  overflow:hidden
}
#nav a{
  background:#999;
  width:100%;
  height:24px;
  display:block;
  float:left;
  outline:none;
  color:#fff;
  line-height:24px;
  text-align:center;
  font-size:16px;
  font-weight:bold;
  overflow:hidden
}
#navCur{
  position:absolute;
  left:0;
  bottom:0;
  height:3px;
  color:#F00;
  width:67px;
  margin:0;
  padding:0;
  display:block;
  float:none;
  background:#FF0000;
  cursor:pointer;
  overflow:hidden
}
</style>
 <script type="text/javascript">
var done=function(){
  var curPostion,thisLeft, curPostion_1;
  var obj = getId('nav').getElementsByTagName('ul')[0],
      timer = null ,
      navCur = getId('navCur'),
      liArr = getId('nav').getElementsByTagName('li'),
      liLength = liArr.length-1;
  for (var x=0;x<liArr.length; x++ ){
    liArr[liLength].style.paddingRight = "0";
    var li = liArr[x],curPostion = navCur.offsetLeft;
    if(li.className == "cur"){
      navCur.style.left = li.offsetLeft + "px";
    }
    li.onmouseover=function(){
      clearTimeout(timer);
      thisLeft = this.offsetLeft;
      if (thisLeft > navCur.offsetLeft) {
        hover();
      }
      else {
        curPostion_1 = this.offsetLeft;
        out();
      }
    };
    li.onmouseout=function(){
      clearTimeout(timer);
      if (curPostion < navCur.offsetLeft) {
        curPostion_1 = curPostion;
        out();
      }
      else {
        thisLeft = curPostion;
        hover();
      }
    };
  }
  function hover(){
    if (navCur.offsetLeft <= thisLeft) {
      var a = Math.max(parseInt((thisLeft - navCur.offsetLeft) / 15), 3);
      navCur.style.left = navCur.offsetLeft + a + "px";
      timer = setTimeout(arguments.callee, 5);
    }
    else{
      navCur.style.left = thisLeft + "px";
      clearTimeout(timer);
    }
  }
  function out(){
    if (navCur.offsetLeft >= curPostion_1) {
      var a = Math.max(parseInt((navCur.offsetLeft - curPostion_1) / 15), 3);
      navCur.style.left = navCur.offsetLeft - a + "px";
      timer = setTimeout(arguments.callee, 5);
    }
    else {
      navCur.style.left = curPostion_1 + "px";
      clearTimeout(timer);
    }
  }
  function getId(id){
    return document.getElementById(id)
  }
}
window.onload=function(){
  done();
}
</script>
</head>
<body>
<div id="nav">
  <ul class="cf">
    <li><a href="" hidefocus="true">1</a></li>
    <li><a href="1" hidefocus="true">2</a></li>
    <li class="cur"><a href="2" hidefocus="true">3</a></li>
    <li><a href="3" hidefocus="true">4</a></li>
    <li><a href="4" hidefocus="true">5</a></li>
    <li><a href="5" hidefocus="true">6</a></li>
  </ul>
  <span id="navCur"></span>
</div>
</body>
</html>

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

一.程式碼註釋:

（1）.var done=function(){}，此函式實現了跟隨效果。

（2）.var curPostion,thisLeft, curPostion_1，生命了三個變數，是用來儲存元素的offsetLeft屬性值，後面會用到。

（3）.var obj = getId('nav').getElementsByTagName('ul')[0]，getId()模擬實現了類似於jQuery的id選擇器功能。這段程式碼是獲取ul元素集合中的第一個ul元素，當然在此例中只有一個ul元素。

（4）.timer = null，宣告一個變數並賦值為null，用作定時器函式的標識。

（5）.navCur = getId('navCur')，獲取id屬性值為navCur的元素物件。

（6）.liArr = getId('nav').getElementsByTagName('li')，獲取指定ul元素下的li元素集合。

（7）.liLength = liArr.length-1，獲取li元素集合最大索引值，因為索引是從0開始計算的。

（8）.for (var x=0;x<liArr.length; x++ ){}，遍歷集合中的每一個元素。

（9）.liArr[liLength].style.paddingRight = "0"，設定最後一個li元素的右內邊距是0,否則的話最後一個li會掉到第二行。

（10）.var li = liArr[x],curPostion = navCur.offsetLeft，第一個賦值語句是將當前li元素物件賦值給變數li，第二個是將navCur物件（底部跟隨元素）的offsetLeft屬性值賦值給變數curPostion。

（11）.if(li.className == "cur"){

  navCur.style.left = li.offsetLeft + "px";

}，如果當前li元素的class屬性值是cur，那麼就將跟隨條的left屬性值設定為當前li元素的offsetLeft值，也就是將跟隨條設定在此li元素的下面。

（12）.li.onmouseover=function(){}，為當前li元素註冊onmouseover事件處理函式。

（13）.clearTimeout(timer)，停止當前定時器函式的執行，這一點很重要，如果連續兩次快速移動到同一個導航欄目上，如果不停止前一個定時器函式的執行，難麼就會造成兩個定時器函式重合執行的情況。

（14）.thisLeft = this.offsetLeft，將當前的元素的offsetLeft值賦值給變數thisLeft。

（15）.if (thisLeft > navCur.offsetLeft) {

  hover();

}，如果當前的元素的offsetLeft大於跟隨元素的offsetLeft值，也就是跟隨條在當前li元素的左邊，那麼就呼叫hover()。

（16）.else {

  curPostion_1 = this.offsetLeft;

  out();

}，如果不大於的話，就將當前元素的offsetLeft賦值給變數curPostion_1，然後呼叫out()函式。

（17）.function hover(){}，此函式實現了跟隨條從左側彈性跟隨到當前li元素底部。

（18）.if (navCur.offsetLeft <= thisLeft) {

  var a = Math.max(parseInt((thisLeft - navCur.offsetLeft) / 15), 3);

  navCur.style.left = navCur.offsetLeft + a + "px";

  timer = setTimeout(arguments.callee, 5);

}，如果當前跟隨元素的offsetLeft屬性值小於當前li元素的offsetLeft屬性值。

那麼就通過var a = Math.max(parseInt((thisLeft - navCur.offsetLeft) / 15), 3)獲取跟隨條每次移動的幅度，因為跟隨條的navCur.offsetLeft值會越來越大，那麼差就越來越小，就出現了彈性運動效果。

timer = setTimeout(arguments.callee, 5)，通過遞迴的方式不斷執行hover()方法。

（19）.else{

  navCur.style.left = thisLeft + "px";

  clearTimeout(timer);

}，否則，將跟隨元素的left屬性值設定為li元素的thisLeft值，這樣就完成跟隨效果。

最後停止定時器函式的執行。

二.相關閱讀:

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

（2）.offsetLeft屬性可以參閱js offsetLeft一章節。

（3）.className屬性可以參閱js className一章節。

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

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

（6）.setTimeout()可以參閱setTimeout()一章節。

相關文章