本文實例講述了jQuery實現帶有滾動線條導航效果的方法。分享給大家供大家參考。具體分析如下：
最早見到這種導航是在魅族的官網，當時（去年）覺得挺不錯的但自己不會JavaScript，因此那時「可望而不可及」。今日去手機QQ for Android官網，又發現類似這樣的導航，反正自己也沒啥事，所以就嘗試用jQuery做出這樣的效果。
效果如下：
首頁
說說
日誌
相簿
CSS：
body,ul,li{margin:0;padding:0;}
#testnav{;height:80px;background:#333;}
.testmenu{width:320px;padding-top:45px;margin:0 auto;}
.testbox div{float:left;width:80px;height:30px;text-align:center;}
.testbox a{color:#ccc;text-decoration:none;font:700 12px/1 "宋体";}
.testbox a:hover{color:#CCEEFF;text-decoration:underline;}
.testline-box{width:100%;background:#eee;}
.testline{display:block;height:3px;width:80px;background:#999;}HTML:
<div id="testnav"> <div class="testmenu"> <div class="testbox"> <div><a href="javascript:void(0)">首页</a></div> <div><a href="javascript:void(0)">说说</a></div> <div><a href="javascript:void(0)">日志</a></div> <div><a href="javascript:void(0)">相册</a></div> </div> <div style="clear:both;"></div> <div class="testline-box"> <span class="testline"></span> </div> </div> </div>
jQuery：
var $line=$("span.testline");
var $w=$(".testbox > div").width();
var m=0;
$(".testbox > div").each(function(n){
var x=$w*n;
$(this).mouseenter(function(){
$line.stop(true,true).animate({"margin-left":x},"slow","easeOutBack");
});
$("a",this).click(function(){
m=x;
});
});
$(".testbox").mouseleave(function(){
$line.stop(true,true).animate({"margin-left":m},"slow","easeOutBack");
});程式碼寫的比較粗糙，再加上自己水平有限，或許您可以簡化寫的更好（反正大致思路應該就是這樣 _ ）。
注意：程式碼中使用了easing插件的效果。記得要去下載並引用這個外掛。如果不想使用easing插件則可將JS中的「easeOutBack」刪除或換成「swing」。
demo中的選單的連結位址我使用了javascript:void(0)代替，主要目的是為了方便示範效果。在實際運用中，我們可以根據目前的url來判斷目前所在位置，確定位置之後再重新賦值JavaScript中變數m賦值，以便確定線條要處於哪個選單下。當然肯定還有其他方法來判斷目前位置。
希望本文所述對大家的jQuery程式設計有所幫助。
