帶滑動條的導航欄(中)---jQuery實現滑動效果
前言
本節利用jQuery實現最終的滑動效果。文件示例程式碼下面有下載連結。
網頁程式碼
navigator2.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>導航欄</title> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> (function ($) { $(function () { nav(); }); function nav() { var $liCur = $(".nav-box ul li.cur"), curP = $liCur.position().left, curW = $liCur.outerWidth(true), $slider = $(".nav-line"), $targetEle = $(".nav-box ul li a"), $navBox = $(".nav-box"); $slider.stop(true, true).animate({ "left":curP, "width":curW }); $targetEle.mouseenter(function () { var $_parent = $(this).parent(), _width = $_parent.outerWidth(true), posL = $_parent.position().left; $slider.stop(true, true).animate({ "left":posL, "width":_width }, "fast"); }); $navBox.mouseleave(function (cur, wid) { cur = curP; wid = curW; $slider.stop(true, true).animate({ "left":cur, "width":wid }, "fast"); }); }; })(jQuery); </script> <style type="text/css"> body{margin: 0; } ul, li{margin: 0; padding: 0;} a{text-decoration: none;} .banner{ width: 100%; height: 70px; /*background-color: yellow;*/ } .nav-box{ width: 50%; float: right; position: relative; top: 35px; /* background-color: darkgray;*/ } .nav-box ul{ list-style: none; } .nav-box ul li{ float: left; font-size: 14px; font-family: "微軟雅黑"; height: 30px; line-height: 30px; padding: 0 12px; /* background-color: #F5F5F5;*/ } .nav-box .nav-line { background: none repeat scroll 0 0 #35C4FD; bottom: 0; font-size: 0; height: 2px; left: 0; line-height: 2px; position: absolute; width: 52px; } </style> </head> <body> <div class="banner" > <div class="nav-box"> <ul> <li class="cur"><a href="#">首頁</a></li> <li><a href="#">論壇</a></li> <li><a href="#">商務合作</a></li> <li><a href="#">下載專區</a></li> <li><a href="#">關於我們</a></li> </ul> <div class="nav-line" ></div> </div> </div> </body> </html>
下面分析一下網頁中涉及到的程式碼。
jQuery中$(function(){})與(function($){})(jQuery)、$(document).ready(function(){})的區別
首先看navigator2.html的JS程式碼結構：
(function($){
$(function(){
nav();
});
function nav() {/*內容*/};
})(jQuery);
1、關於 (function($){} )(jQuery)
原理：
這實際上是匿名函式，比如 function(arg){...} ，這就定義了一個匿名函式，引數為arg，而呼叫函式時，是在函式後面寫上括號和實參的，由於操作符的優先順序，函式本身也需要用括號，即： (function(arg){...})(param)，這就相當於定義了一個引數為arg的匿名函式，並且將param作為引數來呼叫這個匿名函式。
這樣本節使用的 (function($){...})(jQuery) 就不難理解了，之所以只在形參使用$，是為了不與其他庫衝突，所以實參用jQuery相當於
function output(s){...};
output(jQuery);
作用：
這種寫法的最大好處是形成閉包，在(function($){...})(jQuery)內部定義的函式和變數只能在此範圍內有效，形成是否私有函式、私有變數的概念。比如：
2、$(function(){…}); jQuery(function($) {…}); $(document).ready(function(){…})
其實這三個的作用是一樣的，只是寫法不同而已。
參考來源，點此進入
下面分析函式nav()內容
15行到20行宣告並定義變數
15行：獲取元素，即類為cur的li元素
16行：$(selector).position() 獲取元素selector在當前頁面的絕對位置資訊
17行：outerWidth(true) 方法返回元素的寬度（包括內邊距、邊框和外邊距）。
18行：獲取下滑條
19行：獲取層nav-box ul li下的所有a元素
20行：獲取層nav-box
21-24行：關於$(selector).stop(stopAll,goToEnd)的用法解釋請點此進入，改行實現的功能是網頁載入後，使層nav-line停在當前的$liCur元素下面，且與$liCur的寬等長。
25-33行：這裡定義了$targetEle的滑鼠移入事件，即使層nav-line移到當前滑鼠放置的導航標題下面。
34-41行：這裡定義了$navBox的滑鼠移出事件，完成的功能和21-24行相同。
JS單獨存放
由 navigator2.html的內容可以看到，雖然可以完成滑動效果，但是如果再有aboutus.html、download.html等頁面，還是需要這段程式碼，如果再新增同樣的程式碼就太冗餘了，現在將這段程式碼規整到一個.js檔案裡，如下
web.js內容
(function($) {
$(function () {
nav();
});
function nav() {
var $liCur = $(".nav-box ul li.cur"),
curP = $liCur.position().left,
curW = $liCur.outerWidth(true),
$slider = $(".nav-line"),
$targetEle = $(".nav-box ul li a"),
$navBox = $(".nav-box");
$slider.stop(true, true).animate({
"left":curP,
"width":curW
});
$targetEle.mouseenter(function () {
var $_parent = $(this).parent(),
_width = $_parent.outerWidth(true),
posL = $_parent.position().left;
$slider.stop(true, true).animate({
"left":posL,
"width":_width
}, "fast");
});
$navBox.mouseleave(function (cur, wid) {
cur = curP;
wid = curW;
$slider.stop(true, true).animate({
"left":cur,
"width":wid
}, "fast");
});
};
})(jQuery);
此時navigator3.html內部將其引入
其餘內容和navigator2.html內容一樣，此時也能完成滑動效果。如果再有另一個介面，比如about.html，那麼只需將class="cur"改變一下位置，如下
效果圖如下：
該節工程程式碼點此下載
結語
本來導航欄以為寫完了，但是發現了一個問題，下一節再講。