jQuery實現(xiàn)帶滾動線條導航效果的方法

更新時間：2015年01月30日 08:57:50 作者：穗溪

這篇文章主要介紹了jQuery實現(xiàn)帶滾動線條導航效果的方法,分析了帶滾動條導航效果的實現(xiàn)原理與相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下

本文實例講述了jQuery實現(xiàn)帶滾動線條導航效果的方法。分享給大家供大家參考。具體分析如下：

最早見到這種導航是在魅族的官網(wǎng)，當時（去年）覺得挺不錯的但自己不會JavaScript，因此那時“可望而不可及”。今日去手機QQ for Android官網(wǎng)，又發(fā)現(xiàn)類似這樣的導航，反正自己也沒啥事，所以就嘗試用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)代替，主要目的是為了方便演示效果。在實際運用中，我們可以根據(jù)當前的url來判斷當前所在位置，確定位置之后再重新給JavaScript中變量m賦值，從而能確定線條應處于哪個菜單下。當然肯定還有其他方法來判斷當前位置。

希望本文所述對大家的jQuery程序設計有所幫助。

您可能感興趣的文章:

jquery動態(tài)添加以及遍歷option并獲取特定樣式名稱的option方法
下面小編就為大家分享一篇jquery動態(tài)添加以及遍歷option并獲取特定樣式名稱的option方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-01-01
jquery中object對象循環(huán)遍歷的方法
這篇文章主要介紹了jquery中object對象循環(huán)遍歷的方法，感興趣的小伙伴們可以參考一下
2015-12-12
基于jQuery排序及應用實現(xiàn)Tab欄特效
這篇文章主要介紹了基于jQuery排序及應用實現(xiàn)Tab欄特效，jquery是基于JavaScript語言寫出來的一個框架，它封裝JavaScript常用的功能代碼，提供一種簡便的JavaScript設計模式，但實質(zhì)上還是js，所以JQuery也屬于網(wǎng)頁編程語言。下面更多內(nèi)容需要的小伙伴可以參考一下
2022-03-03
JQuery替換DOM節(jié)點的方法
這篇文章主要介紹了JQuery替換DOM節(jié)點的方法,實例分析了jQuery中replaceWith()和replaceAll()方法的相關使用技巧與注意事項,需要的朋友可以參考下
2015-06-06
通過jquery的$.getJSON做一個跨域ajax請求試驗
jquery提供了$.getJSON的方法，讓我們可以實現(xiàn)跨域ajax請求，但jqueryAPI上的內(nèi)容實在太少，如何用$.getJSON，請求網(wǎng)站應該返回怎樣的數(shù)據(jù)庫才能讓$.getJSON獲取到，下面我就用一個實際例子來說明下。
2011-05-05
jQuery實現(xiàn)的簡單前端搜索功能示例
這篇文章主要介紹了jQuery實現(xiàn)的簡單前端搜索功能,涉及jQuery事件響應與頁面元素遍歷、匹配、動態(tài)設置等相關操作技巧,需要的朋友可以參考下
2017-10-10
使用JQUERY進行后臺頁面布局控制DIV實現(xiàn)左右式
一個網(wǎng)站的后臺使用frame框架來實現(xiàn)這種形式，這邊作者不是使用的frame而是純div進行布局，下面看下具體的實現(xiàn)代碼
2014-01-01
Jquery實現(xiàn)的table最后一行添加樣式的代碼
有時間需要將表格的最后一行加上樣式，方便閱讀等需要，需要的朋友可以參考下。
2010-05-05
jQuery length 和 size()區(qū)別總結(jié)
這篇文章主要介紹了jQuery length 和 size()區(qū)別總結(jié),在這里length是屬性，size()是方法，需要的朋友可以參考下
2018-04-04
jQuery Validation PlugIn的使用方法詳解
這篇文章主要介紹了jQuery Validation PlugIn的使用方法，需要的朋友可以參考下
2015-12-12