本文實(shí)例講述了jQuery實(shí)現(xiàn)帶滾動(dòng)線條導(dǎo)航效果的方法。分享給大家供大家參考。具體分析如下：
最早見到這種導(dǎo)航是在魅族的官網(wǎng)，當(dāng)時(shí)（去年）覺得挺不錯(cuò)的但自己不會(huì)JavaScript，因此那時(shí)“可望而不可及”。今日去手機(jī)QQ for Android官網(wǎng)，又發(fā)現(xiàn)類似這樣的導(dǎo)航，反正自己也沒啥事，所以就嘗試用jQuery做出這樣的效果。
效果如下：
首頁
說說
日志
相冊(cè)
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)">相冊(cè)</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");});代碼寫的比較粗糙，再加上自己水平有限，或許您可以簡化寫的更好（反正大致思路應(yīng)該就是這樣+_+）。
注意：代碼中使用了easing插件的效果。記得要去下載并引用這個(gè)插件。如果不想使用easing插件則可將JS中的“easeOutBack”刪掉或者換成“swing”。
demo中的菜單的鏈接地址我使用了javascript:void(0)代替，主要目的是為了方便演示效果。在實(shí)際運(yùn)用中，我們可以根據(jù)當(dāng)前的url來判斷當(dāng)前所在位置，確定位置之后再重新給JavaScript中變量m賦值，從而能確定線條應(yīng)處于哪個(gè)菜單下。當(dāng)然肯定還有其他方法來判斷當(dāng)前位置。
希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
