머리말
이 섹션에서는 궁극적 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를 $에서 (함수 () {}) 및 (함수 ($) {}) (jQuery를) $ (문서) .ready 차 (함수 () {})의
JS 코드 구조 navigator2.html에서 먼저보기 :
(함수 ($) {
() {(기능 $
() 없음;
});
탐색 함수 () {/ * 내용 * /};
}) (jQuery를);
(1)에서 (기능 ($) {}) (jQuery를)
원리 :
이것은 오퍼레이터 때문에 실제로 기능은 브래킷과 인수에 기입 된 후, 익명 함수, 인수의 파라미터 함수 호출을 정의 익명 함수와 같은 함수 (ARG) {...}이고 우선 함수 자체, 즉, 괄호 필요 (함수 (ARG) {...}) 파라미터 익명 함수, 인수 정의 파라미터에 동등한 (PARAM), 및 호출이 PARAM을 익명 함수입니다.
이 섹션에서 사용 이러한 (함수 ($) {...}) (jQuery를) 이유를 이해하기 어렵지 않다 왜 다른 라이브러리와 충돌 위해 단지 $ 매개 변수의 사용, jQuery로 인수에 대응
함수 출력 (들) {...};
출력 (jQuery를);
역할 :
이러한 방식의 가장 큰 장점은 마개의 형성이다 (함수 ($) {...}의 ) 기능과, 전용 기능 전용 변수의 개념을 형성하는 경우, 상기 범위 내에서만 유효 내에 정의 된 변수 (JQuery와) . 예를 들면 :
2, $ (함수 () {...}); jQuery를 (함수 ($) {...}); $ (문서) .ready (함수 () {...})
사실,이 세 가지의 역할은 동일하지만 표현은 다르다.
참조 소스 입력하려면 여기를 클릭
다음의 분석 함수 NAV () 콘텐츠
15 행 내지 20 행 선언하고 변수를 정의
15 행 : 가져 오기 요소, 즉 클래스 리튬 요소 CUR의
라인 16 : $ (선택기) .position ()는 현재 페이지의 요소 선택기 절대 위치 정보를 취득
행 17 : outerWidth (참) 방법 (여백, 테두리와 패딩 포함) 요소의 폭을 돌려줍니다.
행 18 : 기사의 감소를 가져옵니다
행 19 : 레이어 탐색 박스 UL 리튬의 모든 요소를 가져옵니다
행 20 : 계층 탐색 박스를 가져옵니다
라인 21 ~ 24 : $ 약 (선택) .stop (는 stopAll, goToEnd) 사용 설명, 제발 입력하려면 여기를 클릭하여 페이지가로드되면 기능을 달성하기 위해 전환, 아래 현재 $의 liCur 요소 및과의 계층 탐색 줄 정지 넓은 동일한 길이의 $ liCur.
라인 25-33 :이 정의 $ targetEle 마우스가 현재 레이어의 탐색 줄 탐색 제목을 배치 마우스를 이동하는 경우에도, 이벤트를 이동했다.
라인 34 ~ 41 : 동일한 기능과 21-24 라인을 완성 이벤트 중이 정의 $ navBox 마우스.
별도의 저장 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 기본으로, 단순히 클래스 = "똥개"위치의 변화는 같은 다음
다음과 같은 효과가 있습니다 :
축제 엔지니어링 코드를 다운로드하려면 여기를 클릭하십시오
발문
원래, 다음 섹션 반복을 완료,하지만 문제를 발견 탐색 모음.
