一个骚气的文章目录自动生成器了解一下

2018-08-09 admin

这个插件根据选定的目录内容中的 h1, h2, h3, h4, h5, h6 标签来自动生成目录插入到选定的目录容器中,并且提供一个漂亮的样式效果

兼容性:IE10+ (由于使用了 node.classList)

地址戳这里 github地址,欢迎star,issue,pr ~

1. 预览

炫酷模式:

clipboard.png

普通模式:

clipboard.png

可以通过 线上DEMO 来预览一下炫酷模式的效果

2. 实现思路

滚动的监听通过 getBoundingClientRect 获取元素大小以及相对视口的位置,判断我们的监听对象 h1~h6 标签是否在视口中,如果在则添加 linkActiveClass 类。

传统的锚点定位跳转会与hash模式的单页面应用的路由冲突,会导航到错误的路由路径,这里采用把要跳转的id放到 dataset 中,跳转的时候取出来使用 scrollIntoView 来进行平滑滚动到目标位置。

左边的边栏线则是使用 svg 的path来画出来的,根据层级相应做一些调整,辅以css的 transition 的效果就可以呈现出不错的移动效果。

3. Api

如果要使用默认的样式,请手动引入

import 'progress-catalog/src/progress-catalog.css'

使用方法:

// 引入
import Catalog from 'ProgressCatalog'

// 使用 
new Catalog({
    contentEl: 'loading-animation',
    catalogEl: `catalog-content-wrapper`,
    selector: ['h2', 'h3']
})

构造函数接受的参数:

contentEl [String]

需要检索生成目录的内容区的id选择器,不需要加#

catalogEl [String]

将生成的目录append进的目录容器的id选择器,不需要加#

scrollWrapper [可选, String]

监听scroll事件的内容区容器的id选择器,不需要加#,如果不填则默认是 contentEl 的父元素

linkClass [可选, String]

所有目录项都有的类,默认值:cl-link

注意,如果设置了此值,则需要重写默认样式

linkActiveClass [可选, String]

激活的目录项所有的类,默认值:cl-link-active

注意,如果设置了此值,则需要重写默认样式

selector [可选, Array]

选择目录的标题标签,默认值:['h1', 'h2', 'h3', 'h4', 'h5', 'h6']

如果只希望生成目标内容区的 h2, h3 标签的目录,那么可以设置 selector: ['h2', 'h3']

activeHook [可选, Function]

当激活新的目录项标签的时候的回调函数

topMargin [可选, Number]

第一个目录标签在被认为可见之前需要向下移动的距离,默认值:0

bottomMargin [可选, Number]

同上,向下移动的距离,默认值:0

cool [可选, Boolean]

炫酷模式开关,默认值:true


网上的帖子大多深浅不一,甚至有些前后矛盾,在下的文章都是学习过程中的总结,如果发现错误,欢迎留言指出~

参考:

  1. 阮一峰 - SVG 图像入门教程
  2. Codepen - Progress Nav
  3. MDN - scrollIntoView
  4. MDN - HTMLElement.dataset

原文链接:https://segmentfault.com/a/1190000015950560

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-37647.html

文章标题:一个骚气的文章目录自动生成器了解一下

相关文章
JavaScript获取一个范围内日期的方法
本文实例讲述了JavaScript获取一个范围内日期的方法。分享给大家供大家参考。具体分析如下: 指定开始和结束时间,范围该范围内的所有日期放入数组 Date.prototype.addDays = function(days) { v...
2017-03-22
JS实现带缓冲效果打开、关闭、移动一个层的方法
本文实例讲述了JS带缓冲效果打开、关闭、移动一个层的方法。分享给大家供大家参考。具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1...
2017-03-23
jQuery实现自动滚动到页面顶端的方法
本文实例讲述了jQuery实现自动滚动到页面顶端的方法。分享给大家供大家参考。具体实现方法如下: $(".scroll").click(function(event) { //prevent th...
2017-03-23
JavaScript将一个数组插入到另一个数组的方法
本文实例讲述了JavaScript将一个数组插入到另一个数组的方法。分享给大家供大家参考。具体分析如下: 这段JS代码可以通过Array.prototype.push.apply方法将一个数组插入到另外一个数组,下面的代码将数组b插入到a ...
2017-03-21
JavaScript 常见安全漏洞和自动化检测技术
前言 随着 Web2.0 的发展以及 Ajax 框架的普及,富客户端 Web 应用(Rich Internet Applications,RIA)日益增多,越来越多的逻辑已经开始从服务器端转移至客户端,这些逻辑通常都是使用 JavaScri...
2017-03-29
js实现同一个页面多个渐变效果的方法
本文实例讲述了js实现同一个页面多个渐变效果的方法。分享给大家供大家参考。具体分析如下: 这里可实现5个元素中随便一个,鼠标移上去透明度渐渐增加,鼠标移出,透明度渐渐减小的效果。 要点一: var speed = 0; if(target&...
2017-03-22
js实现Select列表内容自动滚动效果代码
本文实例讲述了js实现Select列表内容自动滚动效果。分享给大家供大家参考。具体如下: 这里演示的Select列表内容自动滚动效果,文字可自动滚屏,当网页加载完毕后,Select中的内容会一个接一个向上滚动,当然,滚动的参数和速度是可以调...
2017-03-29
用javascript实现自动输出网页文本
用javascript实现自动输出网页文本,用了setTimeout(),递归和String.substring();两个函数实现此功能,下面把实现代码分享给大家。 做出的效果就像是有一个打字员在打字. <!doctype html...
2017-03-27
Grunt入门教程(自动任务运行器)
在Javascript的开发过程中,经常会遇到一些重复性的任务,比如合并文件、压缩代码、检查语法错误、将Sass代码转成CSS代码等等。通 常,我们需要使用不同的工具,来完成不同的任务,既重复劳动又非常耗时。Grunt就是为了解决这个问题而...
2017-03-27
回到顶部