欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

基于jquery實現(xiàn)百度新聞導(dǎo)航菜單滑動動畫

 更新時間：2016年03月15日 17:16:30   作者：ShadowFiend  
這篇文章主要介紹了基于jquery實現(xiàn)百度新聞導(dǎo)航菜單滑動動畫,感興趣的小伙伴們可以參考一下

本文實例為大家分享jquery實現(xiàn)百度新聞導(dǎo)航菜單滑動動畫，供大家參考，具體內(nèi)容如下

思路與步驟
1.利用UL創(chuàng)建簡單橫向?qū)Ш剑?/p> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>仿百度新聞菜單滑動動畫</title>
  <style type="text/css">
    body, div, ul, li, a
    {
      margin: 0px;
      padding: 0px;
      font-size: 20px;
      color: #FFF;
      border: 0;
    }
    .div-nav-container
    {
      margin-top: 50px;
      width: 100%;
      background-color: #01204F;
    }
    .div-nav
    {
      width: 870px;
      margin: 0px auto;
    }
    ul
    {
      list-style: outside none none;
      width: 100%;
      height: 50px;
    }
    ul li
    {
      float: left;
    }
    ul li a
    {
      line-height: 50px;
      display: block;
      padding: 0px 15px;
      text-align: center;
      text-decoration: none;
    }
  </style>
</head>
<body>
  <div class="div-nav-container">
    <div class="div-nav">
      <ul>
        <li><a href="javascript:void(0)">網(wǎng)站首頁</a></li>
        <li><a href="javascript:void(0)">熱點</a> </li>
        <li><a href="javascript:void(0)">國際新聞</a> </li>
        <li><a href="javascript:void(0)">國內(nèi)新聞</a> </li>
        <li><a href="javascript:void(0)">國家政策</a> </li>
        <li><a href="javascript:void(0)">體育新聞</a> </li>
        <li><a href="javascript:void(0)">娛樂新聞</a> </li>
        <li><a href="javascript:void(0)">名人</a> </li>
        <li><a href="javascript:void(0)">古跡</a> </li>
      </ul>
    </div>
  </div>
</body>
</html>

2.添加一個脫離層的div,命名div-hover，用于菜單滑動動畫，設(shè)置CSS樣式；

<style type="text/css">
  .div-hover
  {
   background-color: Red;height: 50px;
   left: 0px;
   top: 0px;
   width: 0px;
  }
</style>
<div class="div-nav">
   <!--添加滑動背景-->
   <div class="div-hover">
   </div>
   <ul>
     ...
   </ul>
</div>

3.添加菜單項的滑動事件，計算div-hover的滑動要素，左，上邊距以及寬度；

<script type="text/javascript">
  var divHoverLeft = 0;
  var aWidth = 0;

  $(document).ready(function () {
    $("a").on({
      'mouseover': function () {
        SetDivHoverWidthAndLeft(this);
        //設(shè)置滑動動畫
        $(".div-hover").stop().animate({ width: aWidth, left: divHoverLeft }, 150);
      }
    });
  });

  function SetDivHoverWidthAndLeft(element) {
    divHoverLeft = GetLeft(element);
    aWidth = GetWidth(element);
  }

  //獲得Li寬度
  function GetWidth(ele) {
   return $(ele).parent().width();
  }

  //獲得div-hover左邊距
  function GetLeft(element) {
   //獲得li之前的同級li元素
   var menuList = $(element).parent().prevAll();
   var left = 0;
   //計算背景遮罩左邊距
   $.each(menuList, function (index, ele) {
    left += $(ele).width();
   });
   return left;
 }
</script>

效果預(yù)覽

從預(yù)覽效果可以看出，div-hover的定位是有問題的，div-hover應(yīng)該以父級元素絕對定位，所以修改代碼（注釋部分為修改點）如下：

<style type="text/css">
  .div-nav
  {
    width: 870px;
    margin: 0px auto;
    /*作為div-hover的父元素定位參照*/
    position: relative;
  }
  .div-hover
  {
    background-color: Red;
    height: 50px;
    left: 0px;
    top: 0px;
    width: 0px;
    /*以父元素絕對定位*/
    position: absolute;
  }
</style>

雖然解決了定位問題，但是背景圖片還是浮于文字上方，所以調(diào)整代碼，將文字浮動于紅色div之上：

<style type="text/css">
  ul li
  {
    float: left; 
    /*****Start（作用:導(dǎo)航文字浮于div-hover紅色之上）*******/
    position: relative;
    z-index: 4; 
    /*********************End*************************/
  }
</style>

效果預(yù)覽

4.添加菜單點擊，以及加載頁面默認菜單選中；

<style type="text/css">
  /**設(shè)置菜單激活***/
  .active
  {
    background-color: Red;
  }
</style>
<script type="text/javascript">
  var divHoverLeft = 0;
  var aWidth = 0;

  $(document).ready(function () {
    $("a").on({
      'mouseover': function () {
        SetDivHoverWidthAndLeft(this);
        //設(shè)置滑動動畫
        $(".div-hover").stop().animate({ width: aWidth, left: divHoverLeft }, 150);
      },
      /*添加點擊事件*/
      'click': function () {
        SetDivHoverWidthAndLeft(this);
        //清除所有a標簽class
        $('a').removeClass();
        //設(shè)置當前點擊菜單為激活狀態(tài)
        $(this).addClass('active');
      }
    });
  });
</script>
</head>
<body>
  <div class="div-nav-container">
    <div class="div-nav">
      <!--添加滑動背景-->
      <div class="div-hover">
      </div>
      <ul>
        <--默認菜單激活--> 
        <li><a class="active" href="javascript:void(0)">網(wǎng)站首頁</a></li>
        …………
      </ul>
    </div>
  </div>
</body>
</html>

效果預(yù)覽

5.添加鼠標移出范圍，自動定位當前激活元素功能；

      在做此功能之前，先理下思路，鼠標移出操作，我們可以想到mouseout,mouseleave事件，那么隨之就會有以下幾個疑問：

       ①這地方選用哪個事件可以滿足這個條件呢？

       ②那選擇的事件又定位在哪個元素呢？

       ③移出鼠標之后又如何知道當前激活的是哪個元素呢？

       ④如何知道div-hover的左邊距和width等值呢？

      實踐出真知，那就實踐一下：

       首先，以mouseout為例，第一個問題自然就解決了；

       其次，事件定位在哪個元素？通過上面GIF圖，分析，如果定位在A標簽或Li標簽，那么鼠標移出操作在A標簽或Li標簽之間切換也會觸發(fā)自動定位到激活元素（假設(shè)自動定位已做），就會出現(xiàn)如下圖所示情況：

所以不能定位在A或Li標簽上，再想一下，鼠標應(yīng)該是移出整個導(dǎo)航的范圍才可以，那么定位在哪個元素就很容易出來了，應(yīng)該定位在UL或者UL的父級元素，他們兩個的大小范圍均是一致的，所以兩個元素均可以，若兩個元素大小不一致，就應(yīng)該定位在UL上面了。于是就有了類似如下代碼：

$("ul").on({
   'mouseout': function (event) {
      /*動畫定位div-hover位置到激活元素*/
    }
});

      然后,如何知道當前激活為何元素呢，可以在點擊事件時，用隱藏域或者其他display方式存儲當前點擊的元素寬度和左邊距，待鼠標移出操作，重新讀取存儲的數(shù)據(jù)，進而進行animate定位；從而解決以上③④問題；部分代碼如下：

（當然,想知道菜單激活元素,也可以用class為active的方式來查找,不過這種方式,相對來說麻煩一些,首先獲得active的元素,然后通過遍歷li,重新計算一遍寬度和左邊距,最后進行賦值和添加滑動定位;此處暫用隱藏域方式處理，原因是方便簡單，群友如有興趣可以用active方式試驗）

<script type="text/javascript">
   var divHoverLeft = 0;
   var aWidth = 0;

   $(document).ready(function () {
    //菜單滑動動畫
     $("a").on({
       'mouseover': function () {
         SetDivHoverWidthAndLeft(this);
         //設(shè)置滑動動畫
          $(".div-hover").stop().animate({ width: aWidth, left: divHoverLeft }, 150);
       }
'click': function () {
         SetDivHoverWidthAndLeft(this);
         //清除所有a標簽class
         $('a').removeClass();
         //設(shè)置當前點擊菜單為激活狀態(tài)
          $(this).addClass('active');
         $(".h-width").val(aWidth);
         $(".h-left").val(divHoverLeft);
       }
     });

     /*鼠標滑出UL或者div-nav背景div-hover自動定位到激活菜單處*/
     $("ul").on({
       'mouseout': function (event) {
         $(".div-hover").stop().animate({ width: $(".h-width").val(), left: $(".h-left").val() }, 150);
       }
     });
  });

  function SetDivHoverWidthAndLeft(element) {
    divHoverLeft = GetLeft(element);
    aWidth = GetWidth(element);
  }
  ............
  </script>
</head>
<body>
  <div class="div-nav-container">
    <div class="div-nav">
      <!--添加滑動背景-->
      <div class="div-hover">
      </div>
      <ul>
        <li><a class="active" href="javascript:void(0)">網(wǎng)站首頁</a></li>
        ...........
      </ul>
    </div>
  </div>
  <input type="hidden" class="h-width" value="110" />
  <input type="hidden" class="h-left" value="0" />
</body>
</html>

效果展示:

看圖發(fā)現(xiàn)依舊出現(xiàn)之前類似定位在A或Li的問題,出現(xiàn)這種情況的原因:

jquery中mouseout如果定位在一個元素上,例如div,那么此div之下的元素都會具有mouseout事件,也就是常說的,事件冒泡機制;與此類似的事件如mousedown,mouseover等，那么是不是阻止事件冒泡就行了呢? 理論上是這樣的。通常阻止冒泡有兩種方式: event.stopPropagation();和return false;當然他們之間也是有區(qū)別的。

相關(guān)代碼修改如下：

<script type="text/javascript">

    ..........

    $(document).ready(function () {
 
      /*鼠標滑出UL或者div-nav背景div-hover自動定位到激活菜單處*/
      $("ul").on({
        'mouseout': function (event) {
          $(".div-hover").stop().animate({ width: $(".h-width").val(), left: $(".h-left").val() }, 150);
          /**阻止冒泡**/
          event.stopPropagation();
          //return false;
        }
      });
    });

    .......
</script>

無論何種阻止方式,都沒有卵用,依舊阻止不了冒泡,效果可想而知,與上面Gif圖所示無異;

由此證明，mouseover在實現(xiàn)此功能方面是有問題的;

那換mouseleave呢，除了將mouseover修改為mouseleave和去除冒泡代碼外,其他代碼不做改動，實驗效果如下:

從上圖可以看出,效果與百度新聞導(dǎo)航滑動基本無異,至此大功告成;

完整代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>仿百度新聞菜單滑動動畫</title>
  <style type="text/css">
    body, div, ul, li, a
    {
      margin: 0px;
      padding: 0px;
      font-size: 20px;
      color: #FFF;
      border: 0;
    }
    .div-nav-container
    {
      margin-top: 50px;
      width: 100%;
      background-color: #01204F;
    }
    .div-nav
    {
      /*作為div-hover的父元素定位參照*/
      position: relative;
      width: 870px;
      margin: 0px auto;
    }
    .div-hover
    {
      background-color: Red;
      /*以父元素絕對定位*/
      position: absolute;
      height: 50px;
      left: 0px;
      top: 0px;
      width: 0px;
    }
    ul
    {
      list-style: outside none none;
      width: 100%;
      height: 50px;
    }
    ul li
    {
      float: left;
      /*****Start（作用:導(dǎo)航文字浮于div-hover紅色之上）*******/
      position: relative;
      z-index: 4;
      /*********************End*************************/
    }
    ul li a
    {
      line-height: 50px;
      display: block;
      padding: 0px 15px;
      text-align: center;
      text-decoration: none;
    }
    /**設(shè)置菜單激活***/
    .active
    {
      background-color: Red;
    }
  </style>
  <script src="../js/jquery-1.11.3.min.js" type="text/javascript"></script>
  <script type="text/javascript">

    var divHoverLeft = 0;
    var aWidth = 0;

    $(document).ready(function () {
      //菜單滑動動畫
      $("a").on({
         /*此處用mouseover或者mouseenter均可，如果以后要為X標簽同時添加懸停和移出事件，建議用enter和leave也就是傳說中的hover事件，因為里面事件冒泡已經(jīng)處理過，就不會出現(xiàn)類似over和out之類的情況了*/
        'mouseenter': function () {
          SetDivHoverWidthAndLeft(this);
          //設(shè)置滑動動畫
           $(".div-hover").stop().animate({ width: aWidth, left: divHoverLeft }, 150);
        },
        'click': function () {
          SetDivHoverWidthAndLeft(this);
          //清除所有a標簽class
          $('a').removeClass();
          //設(shè)置當前點擊菜單為激活狀態(tài)
          $(this).addClass('active');

          $(".h-width").val(aWidth);
          $(".h-left").val(divHoverLeft);
        }
      });

      /*鼠標滑出UL或者div-nav背景div-hover自動定位到激活菜單處*/
      //mouseleave事件定位到ul或者div-nav均可
      $("ul").on({
        'mouseleave': function (event) {
          $(".div-hover").stop().animate({ width: $(".h-width").val(), left: $(".h-left").val() }, 150);
        }
      });
    });

    function SetDivHoverWidthAndLeft(element) {
      divHoverLeft = GetLeft(element);
      aWidth = GetWidth(element);
    }

    //獲得Li寬度
    function GetWidth(ele) {
      return $(ele).parent().width();
    }

    //獲得div-hover左邊距
    function GetLeft(element) {
      //獲得li之前的同級li元素
      var menuList = $(element).parent().prevAll();
      var left = 0;
      //計算背景遮罩左邊距
      $.each(menuList, function (index, ele) {
        left += $(ele).width();
     });
     return left;
    }
  </script>
</head>
<body>
  <div class="div-nav-container">
    <div class="div-nav">
      <!--添加滑動背景-->
      <div class="div-hover">
      </div>
      <ul>
        <li><a class="active" href="javascript:void(0)">網(wǎng)站首頁</a></li>
        <li><a href="javascript:void(0)">熱點</a> </li>
        <li><a href="javascript:void(0)">國際新聞</a> </li>
        <li><a href="javascript:void(0)">國內(nèi)新聞</a> </li>
        <li><a href="javascript:void(0)">國家政策</a> </li>
        <li><a href="javascript:void(0)">體育新聞</a> </li>
        <li><a href="javascript:void(0)">娛樂新聞</a> </li>
        <li><a href="javascript:void(0)">名人</a> </li>
        <li><a href="javascript:void(0)">古跡</a> </li>
      </ul>
    </div>
  </div>
  <input type="hidden" class="h-width" value="110" />
  <input type="hidden" class="h-left" value="0" />
</body>
</html>

總結(jié)和關(guān)鍵點
1.背景滑動由某個塊狀元素(此處用的div)來實現(xiàn),而非本元素的hover改變背景顏色;

2.注意元素定位(滑動塊狀元素以誰來絕對定位或者相對定位，左邊距的計算和自身寬度的計算；滑動塊狀元素div-hover和li之間的相對定位，以及層級大小)；

3.滑動動畫事件animate和記錄激活菜單，鼠標移出區(qū)域自定定位到激活菜單；

4.jquery中mouseover，mouseout以及mouseenter，mouseleave關(guān)于冒泡機制的區(qū)別；（前兩個未做冒泡機制的限制，后兩個冒泡已經(jīng)經(jīng)過處理，事件只針對注冊元素本身，而不會對子元素起作用，mouseenter和mouseleave用在一個元素標簽上可以用hover事件代替，本身hover就是這兩者的封裝，如果事件在不同元素標簽上，最好分開調(diào)用mouseenter和mouseleave事件）

5.所有關(guān)鍵點以及作用都已經(jīng)在代碼各處加上注釋，各位可以看看。

希望本文對大家學(xué)習(xí)jquery程序設(shè)計有所幫助。

相關(guān)文章

最新評論