快捷導(dǎo)航

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

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

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

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

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

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

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

運(yùn)行效果截圖如下：

在線演示地址如下：

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)導(dǎo)航插件</title>
<style type="text/css">
<!--
body, td, th {
 font-size: 14px;
 background-color:#FFF
}
h1{border-bottom:1px solid #999; margin:50px 60px;}
/*導(dǎo)航默認(rèn)樣式，可根據(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標(biāo)簽高度*/
 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;
}
/*鼠標(biāo)經(jīng)過時樣式*/
.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){
  //默認(rèn)配置
   var defaults = {
   direction:"up", //動畫切換方向，總共4種up 、down 、left 、right
   duration:100 //三種預(yù)定速度之一的字符串("slow", "normal", or "fast")或表示動畫時長的毫秒數(shù)值(如：1000)
   }; 
 // 覆蓋默認(rèn)配置
  var opts = $.extend(defaults, options);
  this.each(function(){
   var navList=$(this).find("li"),
   navLink=navList.find("a");
   //在a標(biāo)簽外側(cè)插入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();
    //初始復(fù)制現(xiàn)有a標(biāo)簽 
    $(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");
    });
     }
   //鼠標(biāo)經(jīng)過時動畫函數(shù)
   function over(o){
    o.animate(v?{"margin-top": -o.outerHeight()/2}:{"margin-left": -o.outerWidth()/2}, opts.duration);
     }
   //鼠標(biāo)移開時動畫函數(shù)
   function out(o){
    o.animate(v?{"margin-top":0}:{"margin-left": 0}, opts.duration);
     }
   //鼠標(biāo)經(jīng)過和離開 
   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 //三種預(yù)定速度之一的字符串("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="#">前端技術(shù)</a></li>
 <li><a href="#">視覺設(shè)計</a></li>
 <li><a href="#">文章歸檔</a></li>
 <li><a href="#">工具/書籍</a></li>
 <li><a href="#">關(guān)于我</a></li>
</ul>
<h1>向右（速度200毫秒）</h1>
<ul class="nav" id="nav2">
 <li><a href="#">首頁</a></li>
 <li><a href="#">前端技術(shù)</a></li>
 <li><a href="#">視覺設(shè)計</a></li>
 <li><a href="#">文章歸檔</a></li>
 <li><a href="#">工具/書籍</a></li>
 <li><a href="#">關(guān)于我</a></li>
</ul>
<h1>向上（速度100毫秒）</h1>
<ul class="nav" id="nav3">
 <li><a href="#">首頁</a></li>
 <li><a href="#">前端技術(shù)</a></li>
 <li><a href="#">視覺設(shè)計</a></li>
 <li><a href="#">文章歸檔</a></li>
 <li><a href="#">工具/書籍</a></li>
 <li><a href="#">關(guān)于我</a></li>
</ul>
<h1>向下（速度400毫秒）</h1>
<ul class="nav" id="nav4">
 <li><a href="#">首頁</a></li>
 <li><a href="#">前端技術(shù)</a></li>
 <li><a href="#">視覺設(shè)計</a></li>
 <li><a href="#">文章歸檔</a></li>
 <li><a href="#">工具/書籍</a></li>
 <li><a href="#">關(guān)于我</a></li>
</ul>
</body>
</html>

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

您可能感興趣的文章: