jquery動態(tài)導航插件dynamicNav用法實例分析

更新時間：2015年09月06日 11:35:24 作者：企鵝

這篇文章主要介紹了jquery動態(tài)導航插件dynamicNav用法,較為詳細的分析了jquery導航插件的原理及具體使用方法,具有一定參考借鑒價值,需要的朋友可以參考下

本文實例講述了jquery動態(tài)導航插件dynamicNav用法。分享給大家供大家參考。具體如下：

這是一款自己寫的jquery動態(tài)導航插件—dynamicNav，具體思路是：

第一、給所有的li里插入一個span標簽，且包含li里面的a標簽
第二、復制一份a標簽，插入到span里，現(xiàn)在span里有兩個a標簽
第三、根據(jù)傳入的參數(shù)判斷是垂直切換還是水平的，如果是垂直的，將span的寬度改為一個a標簽的寬度，這時兩個a標簽就垂直排列了，這里一定要將li的overflow:hidden;否則會看到2個a標簽。如果是水平的，將span的寬度改為2個a標簽的寬度，且將li的寬度改為一個a標簽的寬度，因為我沒有在css中設置li的寬度，它是隨a標簽的寬度而改變，如果你像將所有導航菜單的寬度設為一樣寬，可以在css中給li加上width屬性。
第四、就是開始制作動畫效果，使用hover事件，處理鼠標經過和離開時的效果。

使用jquery的animate改變span的margin-top（垂直方向）和margin-left(水平方向)就可以了。

運行效果截圖如下：

在線演示地址如下：

http://demo.jb51.net/js/2015/jquery-tab-cha-plug-dynamicNav-codes/

具體代碼如下：

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>動態(tài)導航插件</title>
<style type="text/css">
<!--
body, td, th {
 font-size: 14px;
 background-color:#FFF
}
h1{border-bottom:1px solid #999; margin:50px 60px;}
/*導航默認樣式，可根據(jù)實際情況修改*/
* {
 margin:0;
 padding:0
}
.nav {
 width:980px;
 height:30px;
 left:50%;
 margin-left:-490px;
 list-style:none;
 position:relative;
}
.nav li {
 display:inline-block;
 margin:0 3px;
 position:relative;
 overflow:hidden;
 height:30px; /*建議此高度大于等于里面的a標簽高度*/
 float:left;
}
.nav li span {
 display:inline-block;
 overflow:hidden
}
.nav li a {
 text-decoration:none;
 outline:none;
 color:#666;
 display:inline-block;
 padding:0 10px; 
 text-align:center;
 background-color: #E1E1E1;
 font-weight:bold;
 height:30px;
 line-height:30px;
}
/*鼠標經過時樣式*/
.nav li a.over {
 background-color:#666;
 color:#FFF
}
-->
</style>
<script type=text/javascript src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
(function($){
  $.fn.dynamicNav=function(options){
  //默認配置
   var defaults = {
   direction:"up", //動畫切換方向，總共4種up 、down 、left 、right
   duration:100 //三種預定速度之一的字符串("slow", "normal", or "fast")或表示動畫時長的毫秒數(shù)值(如：1000)
   }; 
 // 覆蓋默認配置
  var opts = $.extend(defaults, options);
  this.each(function(){
   var navList=$(this).find("li"),
   navLink=navList.find("a");
   //在a標簽外側插入span
   navList.wrapInner("<span></span>");
   var span=navLink.parent();
   //判斷是否垂直切換
   if(opts.direction=="up" || opts.direction=="down"){
    var v=true;
     }
   //判斷是否改變span初始位置及a樣式 
   if(opts.direction=="right" || opts.direction=="down"){
    var restSpan=true;
     }
    navLink.each(function(){
    //獲取a高度和寬度
    var w=$(this).outerWidth(),
    p=$(this).parent();
    //初始復制現(xiàn)有a標簽 
    $(this).clone().appendTo(p).addClass("over");
    //如果是垂直切換
    if(v){ 
     p.css("width",w);   
     }else{
     p.css("width",2*w).parent().css("width",w); 
     }
     });
   //如果向右或向下切換，改變span初始位置及a樣式
   if(restSpan){
   span.each(function(){
     if(opts.direction=="right"){
     $(this).css({"margin-left":-$(this).outerWidth()/2});
     }
    if(opts.direction=="down"){
     $(this).css({"margin-top" : -$(this).outerHeight()/2});
     }
    $(this)
    .find('a')
    .last()
    .removeClass("over")
    .prev()
    .addClass("over");
    });
     }
   //鼠標經過時動畫函數(shù)
   function over(o){
    o.animate(v?{"margin-top": -o.outerHeight()/2}:{"margin-left": -o.outerWidth()/2}, opts.duration);
     }
   //鼠標移開時動畫函數(shù)
   function out(o){
    o.animate(v?{"margin-top":0}:{"margin-left": 0}, opts.duration);
     }
   //鼠標經過和離開 
   span.hover(function(){
     restSpan ? out($(this)) : over($(this));
      },function(){
      restSpan ? over($(this)) : out($(this));
      });
   });
  };
 })(jQuery);
 $(function(){
  //向左 
  $("#nav1").dynamicNav({
    direction:"left", //動畫切換方向，總共4種up 、down 、left 、right
    duration:300 //三種預定速度之一的字符串("slow", "normal", or "fast")或表示動畫時長的毫秒數(shù)值(如：1000)
    });
  //向右 
  $("#nav2").dynamicNav({
    direction:"right", 
    duration:200 
    });
  //向上
  $("#nav3").dynamicNav({
    direction:"up", 
    duration:100 
    });
  //向下 
  $("#nav4").dynamicNav({
    direction:"down",
    duration:400
    });
  });
</script>
</head>
<body>
<h1>向左（速度300毫秒）</h1>
<ul class="nav" id="nav1">
 <li><a href="#">首頁</a></li>
 <li><a href="#">前端技術</a></li>
 <li><a href="#">視覺設計</a></li>
 <li><a href="#">文章歸檔</a></li>
 <li><a href="#">工具/書籍</a></li>
 <li><a href="#">關于我</a></li>
</ul>
<h1>向右（速度200毫秒）</h1>
<ul class="nav" id="nav2">
 <li><a href="#">首頁</a></li>
 <li><a href="#">前端技術</a></li>
 <li><a href="#">視覺設計</a></li>
 <li><a href="#">文章歸檔</a></li>
 <li><a href="#">工具/書籍</a></li>
 <li><a href="#">關于我</a></li>
</ul>
<h1>向上（速度100毫秒）</h1>
<ul class="nav" id="nav3">
 <li><a href="#">首頁</a></li>
 <li><a href="#">前端技術</a></li>
 <li><a href="#">視覺設計</a></li>
 <li><a href="#">文章歸檔</a></li>
 <li><a href="#">工具/書籍</a></li>
 <li><a href="#">關于我</a></li>
</ul>
<h1>向下（速度400毫秒）</h1>
<ul class="nav" id="nav4">
 <li><a href="#">首頁</a></li>
 <li><a href="#">前端技術</a></li>
 <li><a href="#">視覺設計</a></li>
 <li><a href="#">文章歸檔</a></li>
 <li><a href="#">工具/書籍</a></li>
 <li><a href="#">關于我</a></li>
</ul>
</body>
</html>

希望本文所述對大家的jquery程序設計有所幫助。

您可能感興趣的文章:

基于jquery的用dl模擬實現(xiàn)可自定義樣式的SELECT下拉列表(已封裝)
通過dl模擬實現(xiàn)SELECT下拉列表. 其實這是項目中要常用到的一個效果, 于是, 在之前寫的基礎上封裝成了一個插件. 可自定義樣式, 可防止用戶本意劃過時觸發(fā)事件.
2010-11-11
EasyUI的TreeGrid的過濾功能的解決思路
這篇文章主要介紹了EasyUI的TreeGrid的過濾功能的解決思路,需要的朋友可以參考下
2017-08-08
jquery制作居中遮罩層效果分享
這篇文章主要介紹了jquery制作居中遮罩層效果示例,需要的朋友可以參考下
2014-02-02
常用的jQuery前端技巧收集
這篇文章主要介紹了個人手機的常用的jQuery前端技巧,需要的朋友可以參考下
2014-12-12
jquery跟js初始化加載的多種方法及區(qū)別介紹
jquery是等待頁面加載完數(shù)據(jù)，以及頁面部分元素；js是頁面全部加載完成才執(zhí)行初始化加載，具體示例祥看本文
2014-04-04
jQuery在線選座位插件seat-charts特效代碼分享
這篇文章主要介紹了jQuery在線選座位插件seat-charts特效，推薦給大家，有需要的小伙伴可以參考下。
2015-08-08
jQuery插件擴展extend的簡單實現(xiàn)原理
下面小編就為大家?guī)硪黄猨Query插件擴展extend的簡單實現(xiàn)原理。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-06-06
jquery插件bootstrapValidator表單驗證詳解
這篇文章主要為大家詳細介紹了jquery插件bootstrapValidator表單驗證，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-12-12
基于jquery的獲取瀏覽器窗口大小的代碼
今天正好用到這個，就網上搜了搜，貼出來了。需要的朋友可以參考下。
2011-03-03
c#+jquery實現(xiàn)獲取radio和checkbox的值
這篇文章主要介紹了c#結合jquery實現(xiàn)獲取radio和checkbox的value值的方法，將代碼分享給大家,需要的朋友可以參考下
2014-12-12