jQuery导航插件One-Page-Nav演示-显示命名锚记

简介
使用
选项
示例
推荐

简介

电商网站的分类比较明确，比如1楼是手机通讯产品，2楼是家用电器，3楼是服装鞋包等等，旁边还会有一个固定的楼层导航，这个导航列出了所有的楼层，同时还会高亮你正在浏览的楼层，点击其他楼层按钮，又会滚动到其他楼层。这样的导航可以增加用户体验，让购物更加方便快捷。

如果你想在自己的页面上也实现这样的效果，那么可以试试 jQuery-One-Page-Nav 这款 jQuery插件，

使用

HTML

<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 class="wrap">
<div id="intro">
</div>
<div id="usage">
</div>
<div id="options">
</div>
<div id="examples">
</div>
<div id="recommend">
</div>
</div>

JavaScript

$(function(){
$('#nav').onePageNav();
});

选项

属性/方法	类型	默认值	说明
currentClass	字符串	'current'	导航高亮的 class
changeHash	布尔值	false	URL 显示命名锚记（点击导航显示）
scrollSpeed	整数	750	动画持续时间，以毫秒为单位
scrollThreshold	整数/浮点数	0.5	下一个处于浏览器可视区域多少比例时导航切换
filter	字符串	''	过滤不要的项，如 filter: ':not(.external)'
easing	字符串	'swing'	滚动动画方式
begin	函数		滚动前的回调函数
end	函数		滚动后的回调函数
scrollChange	函数		导航切换后的回调函数

jQuery导航插件One-Page-Nav演示-显示命名锚记相关推荐

一些必看的jQuery导航插件和教程
2019独角兽企业重金招聘Python工程师标准>>> 导航是一个网站最重要的元素之一,您必须遵循统一的风格来设计您的网站,特别是导航的风格,让用户可以轻松地找到他们想要的内容.这里 ...
推荐40个简单的 jQuery 导航插件和教程【下篇】
在这篇文章中,我为大家收集了40款非常棒的 jQuery 导航插件和教程.导航作为网站重要的组成部分,能够帮助用户找到他们想要的内容,因此导航设计的好坏决定了用户能够在你的网站停留更长的时间,浏览更多 ...
收藏一些 JQuery 导航插件
本文收集了10款极具创意的jQuery导航插件,包含上下文菜单键. 浮动.下拉和其他自定义等,供开发者学习.参考. 1. AoG Carousel 类似于3D旋转转盘菜单.可利用鼠标进行任意操作.在线 ...
45个jQuery的导航插件和教程
正如我们所知道的,一个新用户访问一个网站时,决定他们去留的关键是最初的15-20秒种.这是至关重要的,你必须遵循统一的风格来设计您的网站,特别是导航的风格,可能性规则,让用户可以轻松地找到他们想要的内 ...
在jQuery Mobile中实现锚记跳转的方式
在jQuery Mobile中实现锚记跳转的方式:使用JavaScript脚本,模拟实现命名锚记的跳转,具体实现步骤如下:
让页面目标元素 “固定” 在浏览器窗口的顶部 stickUp+jQuery.pin 插件使用单页导航
插件下载地址 stickUp:点击打开链接 jQuery.pin:点击打开链接 stickUp 的使用 One Page Nav一个轻量级的jQuery的网站单页平滑滚动导航插件,One Page N ...
jQuery自定义漂亮的下拉框插件8种效果演示
原始的下拉框不好看这里推荐一个jQuery自定义漂亮的下拉框插件8种效果演示在线预览下载地址实例代码 <!DOCTYPE html> <html lang="en& ...
jQuery分页插件(jquery.page.js)的使用
效果描述: 不用分页即可显示的jQuery插件 jQuery分页插件--jQuery.page.js用法很简单,效果很棒 1.前端首先html的head中引入相关css与js <link re ...
超强的jquery极品插件--色彩选择器类/ 右键菜单类/ 图片新闻flash展示类
Farbtastic Farbtastic是一个color picker插件.它能够在一个页面中加入多个颜色选择控件,然后每个控件关联到页面中的一个元素比如:文本输入框. Farbtastic jQu ...

jQuery导航插件One-Page-Nav演示-显示命名锚记

jQuery导航插件One-Page-Nav演示-显示命名锚记

简介

使用

选项

更多示例

jQuery导航插件One-Page-Nav演示-显示命名锚记相关推荐

最新文章

热门文章