利用jQuery實現Waypoints頂部導航欄



32 124 42



特效描述:利用jQuery實現 Waypoints 頂部導航欄,利用jQuery實現Waypoints頂部導航欄

代碼結構

1. 引入CSS

<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="styles.css">

2. 引入JS

<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<script src="js/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="js/jquery.scrollTo-1.4.2-min.js" type="text/javascript"></script>
<script src="js/waypoints.min.js" type="text/javascript"></script>
<script src="js/navbar2.js" type="text/javascript"></script>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<script src="js/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="js/jquery.scrollTo-1.4.2-min.js" type="text/javascript"></script>
<script src="js/waypoints.min.js" type="text/javascript"></script>
<script src="js/navbar2.js" type="text/javascript"></script>

3. HTML代碼

<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title></title>
    <!--Mobile specific meta goodness :)-->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <!--css-->
    <!--[if lt IE 9]>
    <![endif]-->
    <!-- Favicons-->
    <link rel="shortcut icon" href="img/favicon.ico">
</head>
<body id="home">
 	<div class="wrapper">
		<header>
			<h1>Mars</h1>
		</header>
		<div class="nav-container">
			<nav>
				<ul>
					<li><a href="#chapter-1" class="selected">Chapter I</a></li>
					<li><a href="#chapter-2">Chapter II</a></li>
					<li><a href="#chapter-3">Chapter III</a></li>
					<li><a href="#chapter-4">Chapter IV</a></li>
					<li><a href="#chapter-5">Chapter V</a></li>
				</ul>
				<div class="nav-left"></div>
				<div class="nav-right"></div>
				<div class="nav-above"></div>
			</nav>
		</div>
		<section id="chapter-1">
			<img src="img/dino.jpg" alt="http://51qianduan.com" />
			<div class="column left">
				<h3>Chapter I</h3>
				<p>You don&#39;t know about me without you have read a book by the 
				name of The Adventures of Tom Sawyer; but that ain&#39;t no matter. 
				That book was made by Mr. Mark Twain, and he told the truth, 
				mainly. There was things which he stretched, but mainly he told 
				the truth. That is nothing. I never seen anybody but lied one 
				time or another, without it was Aunt Polly, or the widow, or 
				maybe Mary. Aunt Polly—Tom&#39;s Aunt Polly, she is—and Mary, and 
				the Widow Douglas is all told about in that book, which is 
				mostly a true book, with some stretchers, as I said before.</p>
			</div><!--end column-->
			<div class="column right">
				<p>Now the way that the book winds up is this: Tom and me found 
				the money that the robbers hid in the cave, and it made us rich. 
				We got six thousand dollars apiece鈥攁ll gold. It was an awful 
				sight of money when it was piled up. Well, Judge Thatcher he 
				took it and put it out at interest, and it fetched us a dollar a 
				day apiece all the year round鈥攎ore than a body could tell what 
				to do with. The Widow Douglas she took me for her son, and 
				allowed she would sivilize me; but it was rough living in the 
				house all the time, considering how dismal regular and decent 
				the widow was in all her ways; and so when I couldn&#39;t stand it 
				no longer I lit out.</p>
			</div><!--end column-->
			<hr />
		</section>
		<section id="chapter-2">
			<img src="img/dino.jpg" alt="http://51qianduan.com" />
			<div class="column left">
				<p>I got into my old rags and my sugar-hogshead again, and was 
				free and satisfied. But Tom Sawyer he hunted me up and said he 
				was going to start a band of robbers, and I might join if I 
				would go back to the widow and be respectable. So I went back.</p>
				<p>The widow she cried over me, and called me a poor lost lamb, 
				and she called me a lot of other names, too, but she never meant 
				no harm by it. She put me in them new clothes again, and I 
				couldn&#39;t do nothing but sweat and sweat, and feel all cramped 
				up. Well, then, the old thing commenced again. The widow rung a 
				bell for supper, and you had to come to time. </p>
			</div><!--end column-->
			<div class="column right">
				<p>When you got to the table you couldn&#39;t go right to eating, 
				but you had to wait for the widow to tuck down her head and 
				grumble a little over the victuals, though there warn&#39;t really 
				anything the matter with them,鈥攖hat is, nothing only everything 
				was cooked by itself. In a barrel of odds and ends it is 
				different; things get mixed up, and the juice kind of swaps 
				around, and the things go better.</p>
				<p>After supper she got out her book and learned me about Moses 
				and the Bulrushers, and I was in a sweat to find out all about 
				him; but by and by she let it out that Moses had been dead a 
				considerable long time; so then I didn&#39;t care no more about him, 
				because I don&#39;t take no stock in dead people.</p>
			</div><!--end column-->
			<hr />
		</section>
		<section id="chapter-3">
			<img src="img/dino.jpg" alt="http://51qianduan.com" />
			<div class="column left">
				<p>Pretty soon I wanted to smoke, and asked the widow to let me. 
				But she wouldn&#39;t. She said it was a mean practice and wasn&#39;t 
				clean, and I must try to not do it any more. That is just the 
				way with some people. They get down on a thing when they don&#39;t 
				know nothing about it. Here she was a-bothering about Moses, 
				which was no kin to her, and no use to anybody, being gone, you 
				see, yet finding a power of fault with me for doing a thing that 
				had some good in it. And she took snuff, too; of course that was 
				all right, because she done it herself.</p>
			</div><!--end column-->
			<div class="column right">
				<p>Her sister, Miss Watson, a tolerable slim old maid, with 
				goggles on, had just come to live with her, and took a set at me 
				now with a spelling-book. She worked me middling hard for about 
				an hour, and then the widow made her ease up. I couldn&#39;t stood 
				it much longer. Then for an hour it was deadly dull, and I was 
				fidgety. Miss Watson would say, &quot;Don&#39;t put your feet up there, 
				Huckleberry;&quot; and &quot;Don&#39;t scrunch up like that, Huckleberry鈥攕et 
				up straight;&quot; and pretty soon she would say, &quot;Don&#39;t gap and 
				stretch like that, Huckleberry鈥攚hy don&#39;t you try to behave?&quot;</p>
			</div><!--end column-->
			<hr />
		</section>
		<section id="chapter-4">
			<img src="img/dino.jpg" alt="http://51qianduan.com" />
			<div class="column left">
				<p>Then she told me all about the bad place, and I said I wished 
				I was there. She got mad then, but I didn&#39;t mean no harm. All I 
				wanted was to go somewheres; all I wanted was a change, I warn&#39;t 
				particular. She said it was wicked to say what I said; said she 
				wouldn&#39;t say it for the whole world; she was going to live so as 
				to go to the good place. Well, I couldn&#39;t see no advantage in 
				going where she was going, so I made up my mind I wouldn&#39;t try 
				for it. But I never said so, because it would only make trouble, 
				and wouldn&#39;t do no good.</p>
			</div><!--end column-->
			<hr />
		</section>
		<section id="chapter-5">
			<img src="img/dino.jpg" alt="http://51qianduan.com" />
			<div class="column left">
				<p>Then she told me all about the bad place, and I said I wished 
				I was there. She got mad then, but I didn&#39;t mean no harm. All I 
				wanted was to go somewheres; all I wanted was a change, I warn&#39;t 
				particular. She said it was wicked to say what I said; said she 
				wouldn&#39;t say it for the whole world; she was going to live so as 
				to go to the good place. Well, I couldn&#39;t see no advantage in 
				going where she was going, so I made up my mind I wouldn&#39;t try 
				for it. But I never said so, because it would only make trouble, 
				and wouldn&#39;t do no good.</p>
			</div><!--end column-->
			<hr />
		</section>
 		<footer>
 			<hr />
 		</footer>
 	</div>
</body>
</html>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: flash導航菜單 flash導航條 flash導航 flash菜單 flash下拉菜單 flash下拉導航菜單 圖片延遲加載 圖片延遲 圖片加載 右鍵菜單 收縮菜單 收縮導航 圖片放大鏡 圖片疊加 圖片層疊 圖片翻轉 圖片旋轉 圖片淡出淡進 圖片淡出 圖片淡進 圖片全屏 h5動畫導航 h5動畫菜單 html5動畫導航 html5動畫菜單 頭像上傳 圖片上傳 導航切換 菜單切換 浮動菜單 浮動導航 滾動導航菜單 滾動菜單 滾動導航 圖片拖動 圖片拖拽 二維碼 滑動導航菜單 滑動導航 滑動菜單 地圖 中國地圖 世界地圖 帶縮略圖的幻燈片 h5圖片動畫 h5圖標動畫 html5圖片動畫 html5圖標動畫 圖片廣告 圖片放大縮小 圖片縮放 圖片大小 圖片放大 圖片縮小 圖片變大 圖片變小 滾動切換 滾動條切換 滑動選項卡 滑動切換 圖片切換 圖片選項卡 圖標選項卡 純圖片輪播 圖片輪播 圖片收縮展開 圖片收縮 圖片展開 圖片滑動 圖片滑塊 圖片滾動 圖片滾動條 旋轉木馬 圖片旋轉木馬 文字旋轉木馬 旋轉木馬插件 圖標導航 圖標菜單 浮動 懸浮 懸浮層 懸浮框 浮動層 浮動框 浮動插件 懸浮插件 自動滾動圖片輪播 滑動手風琴 背景切換 大圖切換 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 手風琴 水平手風琴 垂直手風琴 圖片手風琴 文字手風琴 手風琴插件 浮動提示框 圖表 導航菜單 導航條 菜單欄 導航欄 分類導航 響應式導航條 響應式導航 圖片 圖片插件 頭像截圖 頂部固定層 頂部懸浮 導航切換 菜單切換 固定導航 固定菜單 導航菜單插件 導航插件 菜單插件 圖片文字
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

湖北30选5开奖结果走势图表