分享一个超棒的jQuery的单页面滚动导航设计插件 - jQuery one page nav
2012-04-24 15:47
696 查看
在线演示1 在线演示2 本地下载
单 页面设计最近越来越流行了,使用单页面的网站简单优雅并且易于维护,你不需要修改很多文件来做日常维护,而且使用超酷的动态滚动方式来展示你的个人网站或 者公司网站,的确是一个非常不错的选择,今天这里我们将介绍给大家一款非常不错的单页面滚动式导航jQuery插件 - jQuery one page nav,希望大家能够应用到自己的网站设计和开发中,如果你也喜欢这个插件,请给我们留言,谢谢!!
主要特性
支持jQuery需要scrollTo插件
使用简单
支持主流浏览器
使用简单
如何使用
HTML标签:<ul id="nav"> <li class="current"><a href="#section-1">Section 1</a></li> <li><a href="#section-2">Section 2</a></li> <li"><a href="#section-3">Section 3</a></li> </ul> <div id="section-1"> <strong>Section 1</strong> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <div id="section-2"> <strong>Section 2</strong> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <div id="section-3"> <strong>Section 3</strong> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div>
Javascript:
<script src="jquery.js"></script> <script src="jquery.scrollTo.js"></script> <script src="jquery.nav.min.js"></script>
将插件应用到导航项目上:
$(document).ready(function() {$('#nav').onePageNav();});
插件主要选项
currentClass:缺省值'current',用来定义选定的导航项目的样式changeHash:缺省值false,如果你希望hash变化,那么设定这个选项为true。
scrollSpeed:缺省值700,定义滚动速度
插件使用非常简单,希望大家能应该到自己的项目中。
相关文章推荐
- 分享一个超棒的jQuery的单页面滚动导航设计插件 - jQuery one page nav
- 分享一个超棒的jQuery的单页面滚动导航设计插件 - jQuery one page nav
- GBin1分享:一个漂亮的jQuery页面内容导航插件 - Flexiable Nav
- GBin1分享:一个漂亮的jQuery页面内容导航插件 - Flexiable Nav 编辑
- jQuery导航插件One-Page-Nav演示-显示命名锚记
- Jquery插件Page Scroller(页面滚动)
- 基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)
- 一个简单的页面弹窗插件 jquery.pageMsgFrame.js
- 分享一个实用插件(页面滚动触发动画)以及其内部的所有动画属性值
- 分享一款页面视差滚动切换jquery.localscroll插件
- jQuery的滚动导航吸附或锁定设计插件jquery-waypoints
- jQuery全屏滚动插件fullPage.js
- 分享一个帮助用户全屏阅读的jQuery插件 - jQuery fullscreen
- 用jQuery实现当前页面给菜单导航一个特定样式(转载)
- 一个帮助你实现pinterest页面布局的jQuery插件 - jQuery.Shapeshift
- jQuery全屏滚动插件fullPage.js演示
- 分享一个快速将传统表单转化为AJAX支持的表单的jQuery插件 - ALAJAX
- 【jQuery插件】-----页面滚动时动画wow.js
- 分享一个HTML5的上传jQuery插件 - jQuery HTML5 uploader