<img src="http://files.jb51.net/file_images/article/201305/201352161501921.gif?201342161524" alt="jQuery彈性滑動導航選單實現想法及程式碼_jquery" ><br><div class="codetitle"> <span><a style="CURSOR: pointer" data="44625" class="copybut" id="copybut44625" onclick="doCopy('code44625')"><u>複製程式碼</u></a></span> 程式碼如下:</div> <div class="codebody" id="code44625"> <br><!-- 本文參考了該作者的想法：http://runjs.cn/code/ouvvjqka，jquery程式碼系另外寫--> <br><!-- 本文出自：http://blog.csdn.net/liuyanzhi08 --> <br> <!-- 實現想法： <BR>CSS:用一個絕對定位的div作為動畫滑桿,改變它的left屬性來呈現動畫效果<BR>javascript：hover()觸發移動滑鼠到導航nav的動作，和移出導覽nav的動作（即返回current導航） <BR>--> <br> <br> <br> <br><meta charset="UTF-8"> <br><meta name="author" content="Nancle"> <br><title>jQuery彈性滑動導航選單</title> <br><style type="text/css"> <BR> body{ font-family:"Microsoft YaHei";} <BR>#nav_wrapper{ position:relative; width:835px; margin:80px auto; border-bottom:2px #ddd solid;} <BR>#nav_wrx; :50px;} <BR>#nav_wrapper #nav_menu a{ display:block; float:left; height:50px; padding:0 40px; line-height:50px; color:#666; font-size:16prationx; :none;} <BR>#nav_wrapper #nav_animate_block{ position:absolute; bottom:-2px; height:2px; overflow:hidden; background:#80b600;} <BR></style> <br><script type> <BR><script type text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <br><script type="text/javascript"> <BR>$(function(){ <BR>var $current_nav = $("#current_nav"); //current元素（目前所在導覽項目) <BR>var current_nav_width = $current_nav.innerWidth(); <BR>var current_nav_left = $current_nav.position().left; <BR>var $nav_animate_block = $("#nav_animate_block"); //動畫滑桿<BR>$nav_animate_block.css({ width:current_navwidth:current_navwid, lefti_ift ); //初始狀態下，動畫滑桿位置在current元素<BR>// 滑鼠進入a元素時觸發動畫事件<BR>$("#nav_menu a").hover(function(){ <BR>var index = $(this).index(); <BR>var $a_cur = $("#nav_menu").find("a").eq(index);//滑鼠移動到的a元素<BR>/ /利用觸發的a元素索引取得其left位置和它的寬度<BR>var width = $a_cur.innerWidth(); <BR>var left = $a_cur.position().left; <BR>//設定動畫滑桿位置<BR>$nav_animate_block.stop().animate({ <BR>width: width, <BR>left: left <BR>}, 300) <BR>}, function(){ <BR>//當滑鼠離開a元素時，動畫滑桿會回傳current元素位置<BR>$nav_animate_block.stop().animate({ <BR>width: current_nav_width, <BR>left: current_nav_left <BR>}) <>}) <>} 🎜>}); <BR></script> <br> <br> <br><div id="nav_wrapper"> <br><div id="nav_menu"> <br> <a href="#" id="current_nav">首頁</a> <br><a href="#">產品清單</a> <br><a href="#">客戶案例 a> <br></a><a href="#">服務平台</a> <br><a href="#">交流論壇</a> <br><a href="#">關於我們 <br></a> </div> <br><div id="nav_animate_block"></div> <br> </div> <br> <br> <br> </div>
