建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

JQuery定位导航滚动插件jquery.nav.js

来源:易助科技网浏览量:10收藏

简介

nav是一款轻量级的jQuery插件,用于在单页网站上导航。在单击导航时添加平滑滚动,并在滚动不同部分时自动选择正确的导航项。

(下载的附件中附有DEMO)


使用

1.  引入文件


<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/jquery.nav.js"></script>


2.  HTML


<div class="head">导航</div>
<div class="main">
  <ul id="nav">
    <li><a href="#a0">花卉详情</a></li>
    <li><a href="#a1">介绍</a></li>
    <li><a href="#a2">形态特征</a></li>
    <li><a href="#a3">生长习性</a></li>
    <li><a href="#a4">栽培技术</a></li>
    <li><a href="#a5">主要价值</a></li>
  </ul>
  <div class="box">
    <div id="a0" style="height: 300px;border:1px solid #ddd;">花卉详情</div>
    <div id="a1" style="height: 300px;border:1px solid #ddd;">介绍</div>
    <div id="a2" style="height: 300px;border:1px solid #ddd;">形态特征</div>
    <div id="a3" style="height: 300px;border:1px solid #ddd;">生长习性</div>
    <div id="a4" style="height: 300px;border:1px solid #ddd;">栽培技术</div>
    <div id="a5" style="height: 300px;border:1px solid #ddd;">主要价值</div>
  </div>
</div>

[CSS]
<style type="text/css">
  * {margin: 0;padding: 0}
  li {list-style: none}
  a{text-decoration: none;}
  #nav {position: fixed;*left: 90px;top:100px;}
  #nav li {margin-bottom: 2px;width: 130px;height: 41px;line-height: 41px;}
  #nav a {background: #B18282;color: #fff;display: block;text-transform: uppercase;-ms-text-overflow: ellipsis;padding: 0 5px;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}
  #nav a:hover {background: #00d420;color: #fff;}
  #nav .current a {background: #00d420;color: #fff;}
  .head{margin: 0 auto; width: 100%; height: 100px; line-height: 100px; background: #D49B6D; text-align: center; font-size: 30px;}
  .main{ width: 800px; margin: 0 auto; }
  .box{ width: 600px; border:1px solid #ddd; margin-left: 140px; }
</style>


3.  调用


<script>
  $(function() {$('#nav').onePageNav();});
</script>



相关链接

GitHub 地址 :https://github.com/davist11/jQuery-One-Page-Nav