prefacio
En esta sección, deslizando la última jQuery efecto. Documentación El siguiente ejemplo de enlace de descarga de código.
código de la página
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>
El siguiente análisis de las páginas de códigos involucrados.
en jQuery $ (function () {}) y (function ($) {}) (jQuery), $ (document) diferencia ready (function () {}) de
Primer vistazo a la navigator2.html estructura de código JS:
(Function ($) {
$ (Function () {
no ();
});
la función de navegación () {/ * contenido * /};
}) (JQuery);
1, en (function ($) {}) (jQuery)
principio:
Esto es en realidad una función anónima, dicha función (arg) {...}, que define una función anónima, parámetros para arg, la llamada de función y, después de la función se escribe en los soportes y los argumentos, ya que el operador función prioritaria misma tienen necesidad de paréntesis, a saber: (function (arg) {...}) (param), lo que equivale a un parámetro definido arg función anónima como parámetro y llamar a este parámetro función anónima.
Tal usa en esta sección (function ($) {...}) (jQuery) no es difícil entender la razón por la cual el uso de sólo $ parámetro, a fin de no entrar en conflicto con otras bibliotecas, los argumentos se corresponde con jQuery
salida de la función (s) {...};
salida (jQuery);
papel:
El mayor beneficio de este enfoque es la formación de cierres en (($) {...} function ) funciones y variables (el jQuery) definidos dentro sólo es válida dentro de este rango, si se forman, el concepto de variables privadas de función privada . Por ejemplo:
2, $ (function () {...}); jQuery (function ($) {...}); $ (Document) ready (function () {...})
De hecho, el papel de estos tres es la misma, pero las palabras son diferentes.
Fuentes de referencia, haga clic aquí para entrar
El contenido de la función siguiente análisis nav ()
15 líneas de 20 líneas declaran y definen las variables
Línea 15: Get elemento, es decir, de li clase de elemento de act
16 líneas: $ (selector) .position () Obtiene la información de posición absoluta selector de elementos de la página actual
Línea 17: Devuelve la anchura del elemento de outerWidth (true) método (incluidos los márgenes, bordes y relleno).
Línea 18: Obtener la disminución en el artículo
Línea 19: Obtener todos los elementos de una capa de nav-cuadro ul li
Línea 20: Obtener capa de nav-cuadro
Línea 21-24: Sobre $ (selector) .Stop (stopAll, goToEnd) explicación de uso, por favor haga clic aquí para entrar , desviados para lograr la función una vez que se carga la página, la parada de nav-line capa a los elementos actuales $ liCur abajo, y con $ liCur de igual longitud de ancho.
Línea 25-33: Esto define el ratón $ targetEle trasladaron caso, incluso si la capa de nav-línea actual mover el ratón para colocar el título de navegación.
Línea 34-41: Esto define el ratón $ Navbox de cada caso, completado la misma función y 21-24 líneas.
JS almacenamiento por separado
Se puede ver por la navigator2.html contenido, aunque el efecto de deslizamiento se puede lograr, pero si tenemos aboutus.html, download.html y otras páginas, o la necesidad de código, si añadimos el mismo código sería demasiado redundante, y ahora el este código se estructura en un archivo .js, de la siguiente manera
web.js contenido
(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);
En este momento, que se incorpora dentro de navigator3.html
Al igual que el resto del contenido y navigator2.html, efecto de deslizamiento se puede completar en este momento. Si tenemos otra interfaz, tales como about.html, entonces simplemente class = "cur" un cambio de posición, de la siguiente manera
El efecto es como sigue:
Los códigos de ingeniería Festival clic aquí para descargar
epílogo
Originalmente barra de navegación que terminó, pero se encontró con un problema, la siguiente sección de repetición.
