スライダーでナビゲーションバー（中）--- 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の中の$（関数（）{}）および（関数（$）{}）（jQueryの）、$（ドキュメント）.ready差（関数（）{}）の

JSコード構造navigator2.html初めて目：

（関数（$）{

$（関数（）{

（）がありません。

}）;

関数NAV（）{/ *コンテンツ* /}。

}）（jQueryの）。

1、上の（関数（$）{}）（jQueryの）

原理：

これはオペレータので、実際に機能ブラケットと引数に書き込まれた後、匿名関数、引数のパラメータ、関数の呼び出しを定義し、匿名関数、そのような関数（引数）{...}であります優先機能自体は括弧、即ち必要：パラメータとして匿名関数ARG定義されたパラメータに相当する（関数（引数）{...}）（パラメータ）を、このPARAMを呼び出します無名関数。

このセクションで使用されているような（機能（$）{...}）（jQueryの）理由を理解することは困難ではない理由ではない他のライブラリと競合するためにのみ$パラメータの使用は、jQueryを使って引数の対応

関数出力（S）{...}。

出力（jQueryの）。

役割：

そのようなアプローチの最大の利点は、クロージャの形成である（関数（$）{...}で）機能と、プライベート関数プライベート変数の概念を形成している場合、この範囲内でのみ有効内で定義された変数（jQueryの）。例えば：

2、$（関数（）{...}）。jQueryの（関数（$）{...}）。$（ドキュメント）.ready（関数（）{...}）

実際には、これら三つの役割は同じですが、言葉遣いは異なっています。

リファレンスソースは、入力にはこちらをクリックしてください

以下の解析機能NAV（）コンテンツ

15行〜20行は、宣言し、変数を定義します

15行目：要素を取得し、すなわちクラスli要素のCURの

16行：$（セレクタ）.position（）は、現在のページ内の要素セレクタ絶対位置情報を取得します

17行目は：outerWidthの（true）メソッド（マージン、ボーダーやパディングを含む）要素の幅を返します。

18行目：記事の低下をゲット

19行目：層のnav-ボックスUL李内のすべての要素を取得します。

20行目：層NAV-ボックスを取得

行21-24：$（セレクタ）.stop（STOPALL、について goToEnd）の使用説明、してください入力するようにこちらをクリックし、ページがロードされると機能を実現するために流用し、下記の現在の$ liCur要素の層のnav-ラインの停止、および付きワイド同じ長さの$ liCur。

行25-33：この定義は、$ targetEleマウスは、現在のレイヤーのNAV-ラインナビゲーション見出しを配置するためにマウスを移動しても、イベントを移動しました。

行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などの別のインターフェイスを持っている場合は、単にクラス=「CUR」位置の変化は、次のように

次のような効果があります

フェスティバル・エンジニアリング・コードは、ダウンロードするにはここをクリック

エピローグ

もともとは、次のセクションリピートを終えたが、問題を発見したナビゲーションバー。

ナインゼロ荘のブログの専門家

公開された143元の記事・ウォンの賞賛161 ・ビュー121万+

彼のメッセージボードの懸念

スライダーでナビゲーションバー（中）--- jQueryのは、効果をスライド達成

おすすめ