您当前的位置:首页 > 计算机 > 编程开发 > JavaScript

magicnav.js 用于生成页面内导航链接目录的 jQuery 插件

时间:01-31来源:作者:点击数:

magicnav.js 能够快速的生成一个页面内的导航链接目录,依赖于 jquery,运行速度快,自动识别 h 标签生成网页内目录,有点像 WIKI 系统的文章目录。

基本用法

方便您在网页中生成文章目录,通过 H1 标签生成文章目录并且自动生成页面内锚文本链接,会自动生成一个 ID 为 nav 的 div 标签(默认情况下会自动根据 H1 标签自动生成目录)。

$.MagicNav($('#article-nav'), $('article h1'));

第一个参数为页面内导航链接目录放置的位置,第二个参数是选择那些H标签作为页面内导航链接目录,第三个参数为自定义设置。

自定义设置

有几个可供选择的设置参数:

  • titles - 默认情况下,magicnav 抓住从目标元素的文本链接,但你可以选择使用一个属性,例如 data-title
  • ease - 为缓解 scrollto 动画功能,默认 easeinoutquad
  • duration - scrollto 动画的持续时间,单位:毫秒
  • offset - 申请当滚动到目标元素的垂直偏移量,以像素为单位,默认是 0

这是一个运用一些自定义选项的例子:

$.MagicNav($('#article-nav'),$('article h1'),{
    titles: 'data-title',
    ease: function (x, t, b, c, d) {
            // easeOutQuad
            return -c *(t/=d)*(t-2) + b;
        },
    duration: 500,
    offset: -60
});

官方网站  |  在线示例  |  下载地址  |  常见问题

方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门
本栏推荐