首頁 > 開發者 > JavaScript
jquery動態導航外掛程式dynamicNav用法執行個體分析，
本文執行個體講述了jquery動態導航外掛程式dynamicNav用法。分享給大家供大家參考。具體如下：
這是一款自己寫的jquery動態導航外掛程式—dynamicNav，具體思路是：
第一、給所有的li裡插入一個span標籤，且包含li裡面的a標籤
第二、複製一份a標籤，插入到span裡，現在span裡有兩個a標籤
第三、根據傳入的參數判斷是垂直切換還是水平的，如果是垂直的，將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>動態導航外掛程式</title><style type="text/css"><!--body, td, th { font-size: 14px; background-color:#FFF}h1{border-bottom:1px solid #999; margin:50px 60px;}/*導航預設樣式，可根據實際情況修改*/* { 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")或表示動畫時間長度的毫秒數值(如：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(); //初始複製現有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"); }); } //滑鼠經過時動畫函數 function over(o){ o.animate(v?{"margin-top": -o.outerHeight()/2}:{"margin-left": -o.outerWidth()/2}, opts.duration); } //滑鼠移開時動畫函數 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")或表示動畫時間長度的毫秒數值(如：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程式設計有所協助。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
