利用jQuery实现Waypoints顶部导航栏



28 109 37



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

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