Foreword
In this section, the ultimate jQuery sliding effect. Documentation The following sample code download link.
Page code
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>
The following analysis of the code pages involved.
in jQuery $ (function () {}) and (function ($) {}) (jQuery), $ (document) .ready difference (function () {}) of
First look at the JS code structure navigator2.html:
(function($){
$(function(){
are not();
});
function nav () {/ * Content * /};
})(jQuery);
1, on (function ($) {}) (jQuery)
principle:
This is actually an anonymous function, such function (arg) {...}, which defines an anonymous function, parameters for arg, the function call and, after the function is written on the brackets and arguments, since the operator priority function itself need parentheses, namely: (function (arg) {...}) (param), which is equivalent to a parameter defined arg anonymous function as a parameter and calling this param anonymous function.
Such used in this section (function ($) {...}) (jQuery) not difficult to understand the reason why the use of only $ parameter, in order not to conflict with other libraries, the argument corresponds with jQuery
function output(s){...};
output(jQuery);
effect:
The greatest benefit of such an approach is the formation of closures in (function ($) {...} ) functions and variables (the jQuery) defined within only valid within this range, if formed, the concept of private function private variables . such as:
2、$(function(){…}); jQuery(function($) {…}); $(document).ready(function(){…})
In fact, the role of these three is the same, but the wording is different.
Reference sources, click here to enter
The following analysis function nav () content
15 lines to 20 lines declare and define variables
Line 15: Get element, i.e. of class li element cur
16 lines: $ (selector) .position () Gets the element selector absolute position information in the current page
Line 17: Returns the width of the element outerWidth (true) method (including margins, borders and padding).
Line 18: Get the decline in Article
Line 19: Get all the elements in a layer nav-box ul li
Line 20: Get layer nav-box
Line 21-24: About $ (selector) .stop (stopAll, goToEnd) usage explanation, please click here to enter , diverted to achieve the function once the page is loaded, the layer nav-line stop at the current $ liCur elements below, and with $ liCur of equal length wide.
Line 25-33: This defines the $ targetEle mouse moved event, even if the current layer nav-line move the mouse to place the navigation heading.
Line 34-41: This defines the $ navBox mouse out of the event, completed the same function and 21-24 lines.
JS Separate storage
You can see by the content navigator2.html, although the sliding effect can be accomplished, but if we have aboutus.html, download.html and other pages, or the need to code, if we add the same code would be too redundant, and now the this code is structured into a .js file, as follows
web.js content
(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);
At this time, which is incorporated inside navigator3.html
Like the rest of the content and navigator2.html, sliding effect can be completed at this time. If we have another interface, such as about.html, then simply class = "cur" a change of position, as follows
The effect is as follows:
The festival engineering codes Click here to download
Epilogue
Originally navigation bar that finished, but found a problem, the next section repeat.
