利用jQuery实现Waypoints顶部导航栏



72 285 96



特效描述:利用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>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动导航菜单 滑动导航菜单 图片拖动 浮动导航菜单 导航切换 右键菜单 收缩导航菜单 图片放大镜 图片叠加 图片翻转旋转 图片延迟加载 图片淡出淡进 图片全屏 html5动画导航菜单 图片头像上传 二维码 flash导航菜单 滚动切换 滑动选项卡切换 图片广告 图片放大缩小 html5图片动画 带缩略图的幻灯片 地图 图片滚动 图片滑动 图片切换 图片收缩展开 旋转木马 图片轮播 悬浮浮动漂浮 自动滚动图片轮播 图标导航菜单 选项卡切换 滑动手风琴 背景切换 手风琴 浮动提示框 图表 导航菜单导航条 图片 头像截图 顶部悬浮 导航切换 固定导航菜单 导航菜单插件 图片文字

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到