本文實(shí)例講述了jquery動(dòng)態(tài)導(dǎo)航插件dynamicNav用法。分享給大家供大家參考。具體如下：
這是一款自己寫的jquery動(dòng)態(tài)導(dǎo)航插件―dynamicNav，具體思路是：
第一、給所有的li里插入一個(gè)span標(biāo)簽，且包含li里面的a標(biāo)簽
第二、復(fù)制一份a標(biāo)簽，插入到span里，現(xiàn)在span里有兩個(gè)a標(biāo)簽
第三、根據(jù)傳入的參數(shù)判斷是垂直切換還是水平的，如果是垂直的，將span的寬度改為一個(gè)a標(biāo)簽的寬度，這時(shí)兩個(gè)a標(biāo)簽就垂直排列了，這里一定要將li的overflow:hidden;否則會(huì)看到2個(gè)a標(biāo)簽。如果是水平的，將span的寬度改為2個(gè)a標(biāo)簽的寬度，且將li的寬度改為一個(gè)a標(biāo)簽的寬度，因?yàn)槲覜]有在css中設(shè)置li的寬度，它是隨a標(biāo)簽的寬度而改變，如果你像將所有導(dǎo)航菜單的寬度設(shè)為一樣寬，可以在css中給li加上width屬性。
第四、就是開始制作動(dòng)畫效果，使用hover事件，處理鼠標(biāo)經(jīng)過和離開時(shí)的效果。
使用jquery的animate改變span的margin-top（垂直方向）和margin-left(水平方向)就可以了。
運(yùn)行效果截圖如下：
在線演示地址如下：
http://demo.VeVB.COm/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>動(dòng)態(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ù)實(shí)際情況修改*/* { 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)過時(shí)樣式*/.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", //動(dòng)畫切換方向，總共4種up 、down 、left 、right duration:100 //三種預(yù)定速度之一的字符串("slow", "normal", or "fast")或表示動(dòng)畫時(shí)長的毫秒數(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í)動(dòng)畫函數(shù) function over(o){ o.animate(v?{"margin-top": -o.outerHeight()/2}:{"margin-left": -o.outerWidth()/2}, opts.duration); } //鼠標(biāo)移開時(shí)動(dòng)畫函數(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", //動(dòng)畫切換方向，總共4種up 、down 、left 、right duration:300 //三種預(yù)定速度之一的字符串("slow", "normal", or "fast")或表示動(dòng)畫時(shí)長的毫秒數(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è)計(jì)</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è)計(jì)</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è)計(jì)</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è)計(jì)</a></li> <li><a href="#">文章歸檔</a></li> <li><a href="#">工具/書籍</a></li> <li><a href="#">關(guān)于我</a></li></ul></body></html>希望本文所述對大家的jquery程序設(shè)計(jì)有所幫助。
新聞熱點(diǎn)
疑難解答
