jquery如何实现带滚动线导航效果，来看本节脚本学堂小编整理的这个例子。
jquery实现带滚动线条导航效果的方法
1、css样式代码（用于控制jquery滚动条样式）
复制代码 代码示例:
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;}
2、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>
3、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”。
菜单的链接地址使用了javascript:void(0)代替，只是为了方便演示效果。
实际应用中，可以根据当前的url来判断当前所在位置，确定位置之后再重新给JavaScript中变量m赋值，从而能确定线条应处于哪个菜单下。
