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

发布于 2018-07-13 22:02:54 字数 1301 浏览 2021 评论 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
});

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

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

列表为空,暂无数据

关于作者

JSmiles

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

0 文章
0 评论
84935 人气
更多

推荐作者

待"谢繁草

文章 0 评论 0

战皆罪

文章 0 评论 0

子英

文章 0 评论 0

爱的十字路口

文章 0 评论 0

孤者何惧

文章 0 评论 0

xi霄xi

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。