jQuery高亮楼层导航插件One-Page-Nav - 横向、纵向高亮楼层导航特效
导读：今天分享的这个导航插件，常用在各种电商网站模板上，用来提高查找信息的用户体验，特别是分类特别多的时候，用固定导航不能把所有分类行业全部一次性展示出来，这时候就需要用到今天分享的楼层导航了！电商网站的分类比较明确，比如1楼是手机通讯产品，2楼...
今天分享的这个导航插件，常用在各种电商网站模板上，用来提高查找信息的用户体验，特别是分类特别多的时候，用固定导航不能把所有分类行业全部一次性展示出来，这时候就需要用到今天分享的楼层导航了！
电商网站的分类比较明确，比如1楼是手机通讯产品，2楼是家用电器，3楼是服装鞋包等等，旁边还会有一个固定的楼层导航，这个导航列出了所有的楼层，同时还会高亮你正在浏览的楼层，点击其他楼层按钮，又会滚动到其他楼层。这样的导航可以增加用户体验，让购物更加方便快捷。
基于jQuery以及jquery.nav.js插件：
jquery.nav.zip
案例：
这三个案例，是常用的三种楼层跟随导航菜单的样式，下面一一分享其中的代码：
图一：
!DOCTYPE html>
html>
head>
meta charset="utf-8">
title>
jQuery导航插件One-Page-Nav演示-基本演示_dowebok/title>
style>
* {
margin: 0;
padding: 0;
}
.wrap {
width: 800px;
margin: 0 auto;
padding-bottom: 50px;
font: 14px Tahoma,Helvetica,Arial,"宋体";
color: #333;
}
#nav {
position: fixed;
left: 20px;
top: 20px;
list-style-type: none;
font: 14px Tahoma,Helvetica,Arial,"宋体";
}
#nav li {
margin-bottom: 2px;
}
#nav a {
display: block;
padding: 5px 20px;
color: #666;
text-align: center;
background-color: #ededed;
text-decoration: none;
}
#nav .current a {
color: #ededed;
background: #666;
}
.wrap h2 {
margin-bottom: 15px;
padding: 10px 2px;
border-bottom: 1px solid #ccc;
font: 24px Tahoma,Helvetica,Arial,"Microsoft Yahei";
}
.wrap p {
line-height: 24px;
margin: 15px 0;
}
.wrap ul {
padding-left: 1.2em;
line-height: 24px;
}
.wrap .table {
width: 100%;
border-spacing: 0;
border-collapse: collapse;
}
.wrap th, .wrap td {
padding: 8px 5px;
border: 1px solid #ddd;
}
.dowebok {
margin-top: 50px;
}
/style>
script src="http://cdn.staticfile.org/jquery/1.8.3/jquery.min.js">
/script>
script src="http://cdn.dowebok.com/122/jquery.nav.js">
/script>
script>
$(document).ready(function() {
$('#nav').onePageNav();
}
);
/script>
/head>
body>
h1>
jQuery导航插件One-Page-Nav演示-基本演示/h1>
ul id="nav">
li>
a href="#intro">
简介/a>
/li>
li>
a href="#usage">
使用/a>
/li>
li>
a href="#options">
选项/a>
/li>
li>
a href="#examples">
示例/a>
/li>
li>
a href="#recommend">
推荐/a>
/li>
/ul>
div>
div id="intro">
h2>
简介/h2>
p>
电商网站的分类比较明确，比如1楼是手机通讯产品，2楼是家用电器，3楼是服装鞋包等等，旁边还会有一个固定的楼层导航，这个导航列出了所有的楼层，同时还会高亮你正在浏览的楼层，点击其他楼层按钮，又会滚动到其他楼层。这样的导航可以增加用户体验，让购物更加方便快捷。/p>
p>
如果你想在自己的页面上也实现这样的效果，那么可以试试 jQuery-One-Page-Nav 这款 jQuery插件，/p>
p>
电商网站的分类比较明确，比如1楼是手机通讯产品，2楼是家用电器，3楼是服装鞋包等等，旁边还会有一个固定的楼层导航，这个导航列出了所有的楼层，同时还会高亮你正在浏览的楼层，点击其他楼层按钮，又会滚动到其他楼层。这样的导航可以增加用户体验，让购物更加方便快捷。/p>
p>
如果你想在自己的页面上也实现这样的效果，那么可以试试 jQuery-One-Page-Nav 这款 jQuery插件，/p>
/div>
div id="usage">
h2>
使用/h2>
p>
HTML/p>
div>
pre class="pre-show prettyprint linenums">
&
lt;
ul id="nav"&
gt;
&
lt;
li&
gt;
&
lt;
a href="#intro"&
gt;
简介&
lt;
/a&
gt;
&
lt;
/li&
gt;
&
lt;
li&
gt;
&
lt;
a href="#usage"&
gt;
使用&
lt;
/a&
gt;
&
lt;
/li&
gt;
&
lt;
li&
gt;
&
lt;
a href="#options"&
gt;
选项&
lt;
/a&
gt;
&
lt;
/li&
gt;
&
lt;
li&
gt;
&
lt;
a href="#examples"&
gt;
示例&
lt;
/a&
gt;
&
lt;
/li&
gt;
&
lt;
li&
gt;
&
lt;
a href="#recommend"&
gt;
推荐&
lt;
/a&
gt;
&
lt;
/li&
gt;
&
lt;
/ul&
gt;
&
lt;
div&
gt;
&
lt;
div id="intro"&
gt;
&
lt;
/div&
gt;
&
lt;
div id="usage"&
gt;
&
lt;
/div&
gt;
&
lt;
div id="options"&
gt;
&
lt;
/div&
gt;
&
lt;
div id="examples"&
gt;
&
lt;
/div&
gt;
&
lt;
div id="recommend"&
gt;
&
lt;
/div&
gt;
&
lt;
/div&
gt;
/pre>
/div>
p>
JavaScript/p>
div>
pre class="pre-show prettyprint linenums">
$(function(){
$('#nav').onePageNav();
}
);
/pre>
/div>
/div>
div id="options">
h2>
选项/h2>
table>
thead>
tr>
th>
属性/方法/th>
th width="100px">
类型/th>
th>
默认值/th>
th>
说明/th>
/tr>
/thead>
tbody>
tr>
td>
currentClass/td>
td>
字符串/td>
td>
'current'/td>
td>
导航高亮的 class/td>
/tr>
tr>
td>
changeHash/td>
td>
布尔值/td>
td>
false/td>
td>
URL 显示命名锚记（点击导航显示）/td>
/tr>
tr>
td>
scrollSpeed/td>
td>
整数/td>
td>
750/td>
td>
动画持续时间，以毫秒为单位/td>
/tr>
tr>
td>
scrollThreshold/td>
td>
整数/浮点数/td>
td>
0.5/td>
td>
下一个处于浏览器可视区域多少比例时导航切换/td>
/tr>
tr>
td>
filter/td>
td>
字符串/td>
td>
''/td>
td>
过滤不要的项，如 filter: ':not(.external)'/td>
/tr>
tr>
td>
easing/td>
td>
字符串/td>
td>
'swing'/td>
td>
滚动动画方式/td>
/tr>
tr>
td>
begin/td>
td>
函数/td>
td>
/td>
td>
滚动前的回调函数/td>
/tr>
tr>
td>
end/td>
td>
函数/td>
td>
/td>
td>
滚动后的回调函数/td>
/tr>
tr>
td>
scrollChange/td>
td>
函数/td>
td>
/td>
td>
导航切换后的回调函数/td>
/tr>
/tbody>
/table>
/div>
div id="examples">
h2>
更多示例/h2>
ul>
li>
a href="index2.html">
基本演示/a>
/li>
li>
a href="index3.html">
过滤链接/a>
/li>
li>
a href="index4.html">
显示命名标记/a>
/li>
li>
a href="index5.html">
横向导航/a>
/li>
li>
a href="index6.html">
回调函数/a>
/li>
li>
a href="index7.html">
阿里巴巴/a>
/li>
li>
a href="index8.html">
京东/a>
/li>
li>
撑高度/li>
li>
撑高度/li>
li>
撑高度/li>
li>
撑高度/li>
li>
撑高度/li>
/ul>
/div>
div id="recommend">
h2>
其他推荐/h2>
ul>
li>
a href="https://www.yzktw.com.cn/115.html">
jqueryrotate制作百度红包大放送抽奖效果/a>
/li>
li>
a href="https://www.yzktw.com.cn/77.html">
jQuery全屏滚动插件fullPage.js/a>
/li>
li>
a href="https://www.yzktw.com.cn/97.html">
fullPage.js制作网易邮箱6.0介绍页面/a>
/li>
li>
a href="https://www.yzktw.com.cn/120.html">
onepage-scroll制作iPhone 5s页面/a>
/li>
li>
a href="https://www.yzktw.com.cn/93.html">
强大实用的jQuery幻灯片插件Owl Carousel/a>
/li>
li>
a href="https://www.yzktw.com.cn/113.html">
slick制作17173 ChainJoy2014幻灯片/a>
/li>
li>
a href="https://www.yzktw.com.cn/42.html">
jQuery时间轴/时光轴插件jqtimeline/a>
/li>
li>
a href="https://www.yzktw.com.cn/118.html">
onepage-scroll – jQuery单页/全屏滚动插件/a>
/li>
li>
a href="https://www.yzktw.com.cn/48.html">
jQuery响应式图片画廊插件S Gallery/a>
/li>
li>
a href="https://www.yzktw.com.cn/92.html">
iOS 7标签栏图标Tab Bar Icons iOS 7/a>
/li>
li>
a href="https://www.yzktw.com.cn/82.html">
jQuery Lightbox效果插件Boxer/a>
/li>
li>
a href="https://www.yzktw.com.cn/106.html">
Select-or-Die – jQuery下拉框美化插件/a>
/li>
li>
a href="https://www.yzktw.com.cn/103.html">
制作网易2014世界杯史话/世界杯时间轴效果/a>
/li>
li>
a href="https://www.yzktw.com.cn/114.html">
iOS7元素PSD源文件下载/a>
/li>
li>
a href="https://www.yzktw.com.cn/112.html">
47个扁平化图标PSD源文件下载/a>
/li>
li>
a href="https://www.yzktw.com.cn/108.html">
40个夏天元素图标PSD/AI源文件下载/a>
/li>
li>
a href="https://www.yzktw.com.cn/44.html">
iOS7扁平化图标PSD源文件下载/a>
/li>
li>
a href="https://www.yzktw.com.cn/26.html">
灰色风格Metro图标Metrize/a>
/li>
/ul>
/div>
/div>
/div>
/body>
/html>
图二：
!DOCTYPE html>
html>
head>
meta charset="utf-8">
title>
jQuery导航插件One-Page-Nav演示-横向导航_dowebok/title>
style>
* {
margin: 0;
padding: 0;
}
.wrap {
width: 800px;
margin: 0 auto;
padding-bottom: 50px;
font: 14px Tahoma,Helvetica,Arial,"宋体";
color: #333;
}
#nav {
position: fixed;
left: 0;
top: 0;
width: 100%;
padding-top: 10px;
text-align: center;
list-style-type: none;
font: 14px Tahoma,Helvetica,Arial,"宋体";
background-color: #000;
font-size: 0;
}
#nav li {
display: inline-block;
margin: 0 5px;
*display: inline;
zoom: 1;
}
#nav a {
display: inline-block;
padding: 10px 30px;
color: #666;
text-align: center;
text-decoration: none;
*display: inline;
zoom: 1;
font-size: 14px;
}
#nav .current a {
color: #000;
background: #fff;
}
.wrap h2 {
margin-bottom: 15px;
padding: 10px 2px;
border-bottom: 1px solid #ccc;
font: 24px Tahoma,Helvetica,Arial,"Microsoft Yahei";
}
.wrap p {
line-height: 24px;
margin: 15px 0;
}
.wrap ul {
padding-left: 1.2em;
line-height: 24px;
}
.wrap .table {
width: 100%;
border-spacing: 0;
border-collapse: collapse;
}
.wrap th, .wrap td {
padding: 8px 5px;
border: 1px solid #ddd;
}
.dowebok {
margin-top: 50px;
}
/style>
script src="http://cdn.staticfile.org/jquery/1.8.3/jquery.min.js">
/script>
script src="http://cdn.dowebok.com/122/jquery.nav.js">
/script>
script>
$(document).ready(function() {
$('#nav').onePageNav();
}
);
/script>
/head>
body>
h1 style="margin-top: 100px;
">
jQuery导航插件One-Page-Nav演示-横向导航/h1>
ul id="nav">
li>
a href="#intro">
简介/a>
/li>
li>
a href="#usage">
使用/a>
/li>
li>
a href="#options">
选项/a>
/li>
li>
a href="#examples">
示例/a>
/li>
li>
a href="#recommend">
推荐/a>
/li>
/ul>
div>
div id="intro">
h2>
简介/h2>
p>
电商网站的分类比较明确，比如1楼是手机通讯产品，2楼是家用电器，3楼是服装鞋包等等，旁边还会有一个固定的楼层导航，这个导航列出了所有的楼层，同时还会高亮你正在浏览的楼层，点击其他楼层按钮，又会滚动到其他楼层。这样的导航可以增加用户体验，让购物更加方便快捷。/p>
p>
如果你想在自己的页面上也实现这样的效果，那么可以试试 jQuery-One-Page-Nav 这款 jQuery插件，/p>
p>
电商网站的分类比较明确，比如1楼是手机通讯产品，2楼是家用电器，3楼是服装鞋包等等，旁边还会有一个固定的楼层导航，这个导航列出了所有的楼层，同时还会高亮你正在浏览的楼层，点击其他楼层按钮，又会滚动到其他楼层。这样的导航可以增加用户体验，让购物更加方便快捷。/p>
p>
如果你想在自己的页面上也实现这样的效果，那么可以试试 jQuery-One-Page-Nav 这款 jQuery插件，/p>
p>
电商网站的分类比较明确，比如1楼是手机通讯产品，2楼是家用电器，3楼是服装鞋包等等，旁边还会有一个固定的楼层导航，这个导航列出了所有的楼层，同时还会高亮你正在浏览的楼层，点击其他楼层按钮，又会滚动到其他楼层。这样的导航可以增加用户体验，让购物更加方便快捷。/p>
p>
如果你想在自己的页面上也实现这样的效果，那么可以试试 jQuery-One-Page-Nav 这款 jQuery插件，/p>
/div>
div id="usage">
h2>
使用/h2>
p>
HTML/p>
div>
pre class="pre-show prettyprint linenums">
&
lt;
ul id="nav"&
gt;
&
lt;
li&
gt;
&
lt;
a href="#intro"&
gt;
简介&
lt;
/a&
gt;
&
lt;
/li&
gt;
&
lt;
li&
gt;
&
lt;
a href="#usage"&
gt;
使用&
lt;
/a&
gt;
&
lt;
/li&
gt;
&
lt;
li&
gt;
&
lt;
a href="#options"&
gt;
选项&
lt;
/a&
gt;
&
lt;
/li&
gt;
&
lt;
li&
gt;
&
lt;
a href="#examples"&
gt;
示例&
lt;
/a&
gt;
&
lt;
/li&
gt;
&
lt;
li&
gt;
&
lt;
a href="#recommend"&
gt;
推荐&
lt;
/a&
gt;
&
lt;
/li&
gt;
&
lt;
/ul&
gt;
&
lt;
div&
gt;
&
lt;
div id="intro"&
gt;
&
lt;
/div&
gt;
&
lt;
div id="usage"&
gt;
&
lt;
/div&
gt;
&
lt;
div id="options"&
gt;
&
lt;
/div&
gt;
&
lt;
div id="examples"&
gt;
&
lt;
/div&
gt;
&
lt;
div id="recommend"&
gt;
&
lt;
/div&
gt;
&
lt;
/div&
gt;
/pre>
/div>
p>
JavaScript/p>
div>
pre class="pre-show prettyprint linenums">
$(function(){
$('#nav').onePageNav();
}
);
/pre>
/div>
/div>
div id="options">
h2>
选项/h2>
table>
thead>
tr>
th>
属性/方法/th>
th width="100px">
类型/th>
th>
默认值/th>
th>
说明/th>
/tr>
/thead>
tbody>
tr>
td>
currentClass/td>
td>
字符串/td>
td>
'current'/td>
td>
导航高亮的 class/td>
/tr>
tr>
td>
changeHash/td>
td>
布尔值/td>
td>
false/td>
td>
URL 显示命名锚记（点击导航显示）/td>
/tr>
tr>
td>
scrollSpeed/td>
td>
整数/td>
td>
750/td>
td>
动画持续时间，以毫秒为单位/td>
/tr>
tr>
td>
scrollThreshold/td>
td>
整数/浮点数/td>
td>
0.5/td>
td>
下一个处于浏览器可视区域多少比例时导航切换/td>
/tr>
tr>
td>
filter/td>
td>
字符串/td>
td>
''/td>
td>
过滤不要的项，如 filter: ':not(.external)'/td>
/tr>
tr>
td>
easing/td>
td>
字符串/td>
td>
'swing'/td>
td>
滚动动画方式/td>
/tr>
tr>
td>
begin/td>
td>
函数/td>
td>
/td>
td>
滚动前的回调函数/td>
/tr>
tr>
td>
end/td>
td>
函数/td>
td>
/td>
td>
滚动后的回调函数/td>
/tr>
tr>
td>
scrollChange/td>
td>
函数/td>
td>
/td>
td>
导航切换后的回调函数/td>
/tr>
/tbody>
/table>
/div>
div id="examples">
h2>
更多示例/h2>
ul>
li>
a href="index2.html">
基本演示/a>
/li>
li>
a href="index3.html">
过滤链接/a>
/li>
li>
a href="index4.html">
显示命名标记/a>
/li>
li>
a href="index5.html">
横向导航/a>
/li>
li>
a href="index6.html">
回调函数/a>
/li>
li>
a href="index7.html">
阿里巴巴/a>
/li>
li>
a href="index8.html">
京东/a>
/li>
li>
撑高度/li>
li>
撑高度/li>
li>
撑高度/li>
li>
撑高度/li>
li>
撑高度/li>
/ul>
/div>
div id="recommend">
h2>
其他推荐/h2>
ul>
li>
a href="https://www.yzktw.com.cn/115.html">
jqueryrotate制作百度红包大放送抽奖效果/a>
/li>
li>
a href="https://www.yzktw.com.cn/77.html">
jQuery全屏滚动插件fullPage.js/a>
/li>
li>
a href="https://www.yzktw.com.cn/97.html">
fullPage.js制作网易邮箱6.0介绍页面/a>
/li>
li>
a href="https://www.yzktw.com.cn/120.html">
onepage-scroll制作iPhone 5s页面/a>
/li>
li>
a href="https://www.yzktw.com.cn/93.html">
强大实用的jQuery幻灯片插件Owl Carousel/a>
/li>
li>
a href="https://www.yzktw.com.cn/113.html">
slick制作17173 ChainJoy2014幻灯片/a>
/li>
li>
a href="https://www.yzktw.com.cn/42.html">
jQuery时间轴/时光轴插件jqtimeline/a>
/li>
li>
a href="https://www.yzktw.com.cn/118.html">
onepage-scroll – jQuery单页/全屏滚动插件/a>
/li>
li>
a href="https://www.yzktw.com.cn/48.html">
jQuery响应式图片画廊插件S Gallery/a>
/li>
li>
a href="https://www.yzktw.com.cn/92.html">
iOS 7标签栏图标Tab Bar Icons iOS 7/a>
/li>
li>
a href="https://www.yzktw.com.cn/82.html">
jQuery Lightbox效果插件Boxer/a>
/li>
li>
a href="https://www.yzktw.com.cn/106.html">
Select-or-Die – jQuery下拉框美化插件/a>
/li>
li>
a href="https://www.yzktw.com.cn/103.html">
制作网易2014世界杯史话/世界杯时间轴效果/a>
/li>
li>
a href="https://www.yzktw.com.cn/114.html">
iOS7元素PSD源文件下载/a>
/li>
li>
a href="https://www.yzktw.com.cn/112.html">
47个扁平化图标PSD源文件下载/a>
/li>
li>
a href="https://www.yzktw.com.cn/108.html">
40个夏天元素图标PSD/AI源文件下载/a>
/li>
li>
a href="https://www.yzktw.com.cn/44.html">
iOS7扁平化图标PSD源文件下载/a>
/li>
li>
a href="https://www.yzktw.com.cn/26.html">
灰色风格Metro图标Metrize/a>
/li>
/ul>
/div>
/div>
/body>
/html>
图三：
!DOCTYPE html>
html>
head>
meta charset="utf-8">
title>
jQuery导航插件One-Page-Nav演示-阿里巴巴_dowebok/title>
style>
* {
margin: 0;
padding: 0;
}
#nav {
display: none;
position: fixed;
left: 50%;
top: 20px;
width: 105px;
margin-left: 515px;
padding-bottom: 10px;
border-top: 3px solid #ff7300;
list-style-type: none;
font: 12px Tahoma,Helvetica,Arial,"宋体";
background-color: #f5f5f5;
}
#nav li {
width: 95px;
height: 20px;
margin: 10px auto 0;
border-radius: 10px;
line-height: 20px;
}
#nav em {
float: left;
width: 22px;
margin-left: 6px;
text-align: center;
font-style: normal;
}
#nav span {
float: left;
width: 60px;
text-align: center;
}
#nav a {
color: #888;
text-decoration: none;
}
#nav .current {
background-color: #888;
}
#nav .current a {
color: #fff;
}
.wrap h2 {
margin-bottom: 15px;
padding: 10px 2px;
border-bottom: 1px solid #ccc;
font: 24px Tahoma,Helvetica,Arial,"Microsoft Yahei";
}
.wrap p {
line-height: 24px;
margin: 15px 0;
}
.wrap ul {
padding-left: 1.2em;
line-height: 24px;
}
.wrap .table {
width: 100%;
border-spacing: 0;
border-collapse: collapse;
}
.wrap th, .wrap td {
padding: 8px 5px;
border: 1px solid #ddd;
}
#f0 {
height: 622px;
background: url(http://cdn.dowebok.com/122/alibaba1.jpg) 50% 0 no-repeat;
}
#f1 {
height: 277px;
background: url(http://cdn.dowebok.com/122/alibaba2.jpg) 50% 0 no-repeat;
}
#f2 {
height: 277px;
background: url(http://cdn.dowebok.com/122/alibaba3.jpg) 50% 0 no-repeat;
}
#f3 {
height: 277px;
background: url(http://cdn.dowebok.com/122/alibaba4.jpg) 50% 0 no-repeat;
}
#f4 {
height: 277px;
background: url(http://cdn.dowebok.com/122/alibaba5.jpg) 50% 0 no-repeat;
}
#f5 {
height: 277px;
background: url(http://cdn.dowebok.com/122/alibaba6.jpg) 50% 0 no-repeat;
}
#f6 {
height: 277px;
background: url(http://cdn.dowebok.com/122/alibaba7.jpg) 50% 0 no-repeat;
}
#f7 {
height: 277px;
background: url(http://cdn.dowebok.com/122/alibaba8.jpg) 50% 0 no-repeat;
}
#f8 {
height: 277px;
background: url(http://cdn.dowebok.com/122/alibaba9.jpg) 50% 0 no-repeat;
}
#f9 {
height: 277px;
background: url(http://cdn.dowebok.com/122/alibaba10.jpg) 50% 0 no-repeat;
}
#f10 {
height: 277px;
background: url(http://cdn.dowebok.com/122/alibaba11.jpg) 50% 0 no-repeat;
}
#f11 {
height: 277px;
background: url(http://cdn.dowebok.com/122/alibaba12.jpg) 50% 0 no-repeat;
}
#f12 {
height: 277px;
background: url(http://cdn.dowebok.com/122/alibaba13.jpg) 50% 0 no-repeat;
}
#f13 {
height: 277px;
background: url(http://cdn.dowebok.com/122/alibaba14.jpg) 50% 0 no-repeat;
}
#f14 {
height: 277px;
background: url(http://cdn.dowebok.com/122/alibaba15.jpg) 50% 0 no-repeat;
}
#f15 {
height: 277px;
background: url(http://cdn.dowebok.com/122/alibaba16.jpg) 50% 0 no-repeat;
}
#f16 {
height: 277px;
background: url(http://cdn.dowebok.com/122/alibaba17.jpg) 50% 0 no-repeat;
}
#f17 {
height: 277px;
background: url(http://cdn.dowebok.com/122/alibaba18.jpg) 50% 0 no-repeat;
}
#f18 {
height: 277px;
background: url(http://cdn.dowebok.com/122/alibaba19.jpg) 50% 0 no-repeat;
}
#f19 {
height: 449px;
background: url(http://cdn.dowebok.com/122/alibaba20.jpg) 50% 0 no-repeat;
}
#f20 {
height: 309px;
background: url(http://cdn.dowebok.com/122/alibaba21.jpg) 50% 0 no-repeat;
}
#f21 {
height: 504px;
background: url(http://cdn.dowebok.com/122/alibaba22.jpg) 50% 0 no-repeat;
}
/style>
script src="http://cdn.staticfile.org/jquery/1.8.3/jquery.min.js">
/script>
script src="http://cdn.dowebok.com/122/jquery.nav.js">
/script>
script>
$(function() {
$('#nav').onePageNav({
scrollThreshold: 0.3 }
);
$(window).scroll(function(){
if($(window).scrollTop() >
200){
$('#nav').fadeIn();
}
else {
$('#nav').fadeOut();
}
}
);
}
);
/script>
/head>
body>
a name="top">
/a>
ul id="nav">
li>
a href="#f1">
em>
1F/em>
span>
橡胶塑料/span>
/a>
/li>
li>
a href="#f2">
em>
2F/em>
span>
冶金钢材/span>
/a>
/li>
li>
a href="#f3">
em>
3F/em>
span>
化工精细/span>
/a>
/li>
li>
a href="#f4">
em>
4F/em>
span>
纺织市场/span>
/a>
/li>
li>
a href="#f5">
em>
5F/em>
span>
包装市场/span>
/a>
/li>
li>
a href="#f6">
em>
6F/em>
span>
机械五金/span>
/a>
/li>
li>
a href="#f7">
em>
7F/em>
span>
电子电工/span>
/a>
/li>
li>
a href="#f8">
em>
8F/em>
span>
照明安防/span>
/a>
/li>
li>
a href="#f9">
em>
9F/em>
span>
服装内衣/span>
/a>
/li>
li>
a href="#f10">
em>
10F/em>
span>
鞋包配饰/span>
/a>
/li>
li>
a href="#f11">
em>
11F/em>
span>
数码家电/span>
/a>
/li>
li>
a href="#f12">
em>
12F/em>
span>
美妆日化/span>
/a>
/li>
li>
a href="#f13">
em>
13F/em>
span>
童装母婴/span>
/a>
/li>
li>
a href="#f14">
em>
14F/em>
span>
家纺家装/span>
/a>
/li>
li>
a href="#f15">
em>
15F/em>
span>
食品农业/span>
/a>
/li>
li>
a href="#f16">
em>
16F/em>
span>
日用百货/span>
/a>
/li>
li>
a href="#f17">
em>
17F/em>
span>
采购必应/span>
/a>
/li>
li>
a href="#f18">
em>
18F/em>
span>
商务服务/span>
/a>
/li>
li>
a href="#f19">
em>
19F/em>
span>
以商会友/span>
/a>
/li>
/ul>
div>
div id="f0">
/div>
div id="f1">
/div>
div id="f2">
/div>
div id="f3">
/div>
div id="f4">
/div>
div id="f5">
/div>
div id="f6">
/div>
div id="f7">
/div>
div id="f8">
/div>
div id="f9">
/div>
div id="f10">
/div>
div id="f11">
/div>
div id="f12">
/div>
div id="f13">
/div>
div id="f14">
/div>
div id="f15">
/div>
div id="f16">
/div>
div id="f17">
/div>
div id="f18">
/div>
div id="f19">
/div>
div id="f20">
/div>
div id="f21">
/div>
/div>
/body>
/html>
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： jQuery高亮楼层导航插件One-Page-Nav - 横向、纵向高亮楼层导航特效
本文地址： https://pptw.com/jishu/18481.html