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

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

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

相关文章
JS实现带缓冲效果打开、关闭、移动一个层的方法
本文实例讲述了JS带缓冲效果打开、关闭、移动一个层的方法。分享给大家供大家参考。具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1...
2017-03-23
原生js实现网页顶部自动下拉/收缩广告效果
知识要点 1.实现原理: 通过递归改变div的高度值达到缓慢下拉的效果。 2.一共分为3个步骤我写了三个函数 **第一个show()函数(下拉):**初始值高度h<300的话 h+5  反之return退出停止,调用setTimeou...
2017-02-27
js日期范围初始化得到前一个月日期的方法
本文实例讲述了js日期范围初始化得到前一个月日期的方法。分享给大家供大家参考。具体分析如下: 今天做时间范围的初始化设定,开始时间是当前时间的前一个月,终于找到完美的解决方案了。 Date.prototype.format = functi...
2017-03-23
JavaScript将一个数组插入到另一个数组的方法
本文实例讲述了JavaScript将一个数组插入到另一个数组的方法。分享给大家供大家参考。具体分析如下: 这段JS代码可以通过Array.prototype.push.apply方法将一个数组插入到另外一个数组,下面的代码将数组b插入到a ...
2017-03-21
js实现Select列表内容自动滚动效果代码
本文实例讲述了js实现Select列表内容自动滚动效果。分享给大家供大家参考。具体如下: 这里演示的Select列表内容自动滚动效果,文字可自动滚屏,当网页加载完毕后,Select中的内容会一个接一个向上滚动,当然,滚动的参数和速度是可以调...
2017-03-29
js实现同一个页面多个渐变效果的方法
本文实例讲述了js实现同一个页面多个渐变效果的方法。分享给大家供大家参考。具体分析如下: 这里可实现5个元素中随便一个,鼠标移上去透明度渐渐增加,鼠标移出,透明度渐渐减小的效果。 要点一: var speed = 0; if(target&...
2017-03-22
JavaScript 常见安全漏洞和自动化检测技术
前言 随着 Web2.0 的发展以及 Ajax 框架的普及,富客户端 Web 应用(Rich Internet Applications,RIA)日益增多,越来越多的逻辑已经开始从服务器端转移至客户端,这些逻辑通常都是使用 JavaScri...
2017-03-29
用javascript实现自动输出网页文本
用javascript实现自动输出网页文本,用了setTimeout(),递归和String.substring();两个函数实现此功能,下面把实现代码分享给大家。 做出的效果就像是有一个打字员在打字. <!doctype html...
2017-03-27
Grunt入门教程(自动任务运行器)
在Javascript的开发过程中,经常会遇到一些重复性的任务,比如合并文件、压缩代码、检查语法错误、将Sass代码转成CSS代码等等。通 常,我们需要使用不同的工具,来完成不同的任务,既重复劳动又非常耗时。Grunt就是为了解决这个问题而...
2017-03-27
假如在App和网页之间只能选一个?
App和网页到底有什么差别? 日前,印度最大电商Flipkart宣布将在一年之内舍弃网页版,只在App端开展业务。其收购的Myntra也将从今年5月1日开始放弃网站,专注于App运营。而在此前18个月内,Flipcart的手机端流量增长了1...
2015-12-25
回到顶部