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

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

发布于 2018-07-13 字数 1623 浏览 1857 评论 0

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

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

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

猫性小仙女

文章 1 评论 0

qq_VO6LhT

文章 0 评论 0

猿舌电影

文章 0 评论 0

7556275422

文章 0 评论 0

YYQ_139

文章 0 评论 0