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

Question

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
});

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