文章目录自动生成器

提供一个插件,可以实现segmentfault的文章目录效果啦~~

不止点击跳转还滚动激活当前链接

demo地址

使用很简单

<!-- 文章容器 -->
<div id="kCatelog"></div>
<!-- 目录容器 -->
<div class="k-catelog-list" id="catelogList"></div>
new Katelog({contentEl: 'kCatelog',catelogEl: 'catelogList',linkClass: 'k-catelog-link',linkActiveClass: 'k-catelog-link-active',supplyTop: 20,selector: ['h2', 'h3'],active: function (el) {console.log(el);}
});

支持IE8以上和主流的浏览器

contentEl

文章容器,id选择器

catelogEl

目录容器,id选择器

linkClass

每个目录项的类

linkActiveClass

当前激活的目录项的类

selector(可选)

选择目录的标题元素,默认支持6级树形结构

默认值: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6']

selector: ['h2', 'h3']

supplyTop(可选)

每个目录需要补充的高度,比如fixed头部布局会挡住实现,可以设置supplyTop来修正

如果对你有用的话,给个小星星吧!https://github.com/KELEN/k-ca...

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/254054.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

工业相机之全局曝光与卷帘曝光

曝光方式包括两种&#xff1a; 全局曝光&#xff08;global shutter&#xff09;卷帘曝光&#xff08;rolling shutter&#xff09; CCD相机都是全局曝光&#xff0c;CMOS相机既有全局曝光也有卷帘曝光 全局曝光 全局曝光的方式比较简单。也就是说光圈打开后&#xff0c;整个图…

.NET 环境中使用RabbitMQ

在企业应用系统领域&#xff0c;会面对不同系统之间的通信、集成与整合&#xff0c;尤其当面临异构系统时&#xff0c;这种分布式的调用与通信变得越发重要。其次&#xff0c;系统中一般会有很多对实时性要求不高的但是执行起来比较较耗时的地方&#xff0c;比如发送短信&#…

成像质量、像素个数、感光元件尺寸的关系

成像质量、像素个数、感光元件尺寸的关系 感光元件 (影像传感器) 就是拍摄的照片最终成像的位置。相当于传统相机里面的胶卷&#xff0c;不同相机的感光元件尺寸是不一样的。 1. 像素的含义 两个 100 平方米的房子 A 和 B&#xff0c;A 房子里面平均分成 10 个房间&#xff…

15、iOS开发之duplicate symbols for architecture x86_64错误

1. 错误提示 2. 分析错误原因 3. 解决问题办法 一、错误提示 在我们写代码过程中可能会经常遇到这样一个错误&#xff1a; [objc] view plaincopy print?<span style"font-size:32px;color:#ff0000;">ld: 4 duplicate symbols for architecture x86_64 clang…

机器视觉工业镜头-Computar

日本Computar镜头&#xff0c;全球工业镜头、CCTV镜头市场占有率第一。CBC板式会社成立于1925年&#xff0c;总部在日本东京。1960年 CBC香港公司成立&#xff0c;是computar镜头走向国际市场的前奏。 1979年 研制出第一只手动变焦镜头。 1985年 研制出第一款非球面高速镜头。1…

第四章:Django 模型 —— 设计系统表

1. Django框架提供了完善的模型&#xff08;Model &#xff09;层来创建和存储数据&#xff0c;每一个模型对应数据库中的唯一的一张表。 2. Django 模型基础知识&#xff1a; 。每一本模型是一个Python类&#xff0c;继承了django.db.models.Model类 。该模型中每一个属性一个…

工业视觉镜头NAVITAR

品牌介绍 美国NAVITAR是优越的上等光学系统制造商和供应商&#xff0c;工业视觉镜头NAVITAR为机器视觉、检测和生物医学诊断行业提供的定制光学解决方案。 工业视觉镜头NAVITAR用于鉴定产品、检查产品缺陷、测量零件尺寸、操纵机器人设备和协助进行科学分析与探索。 还用来引导…

TCP系列48—拥塞控制—11、FRTO拥塞撤销

一、概述FRTO虚假超时重传检测我们之前重传章节的文章已经介绍过了&#xff0c;这里不再重复介绍&#xff0c;针对后面的示例在说明两点1、FRTO只能用于虚假超时重传的探测&#xff0c;不能用于虚假快速重传的探测。2、延迟ER重传触发的进入Recovery状态时候&#xff0c;并不会…

娱乐一下

6年前&#xff0c;没几个人知道尤里米尔纳&#xff08;Yuri Milner&#xff09;是谁。但今天&#xff0c;他已经是地球上最有名的投资人了。 短短几年内&#xff0c;这家伙掌管的风险投资基金DST&#xff08;数字天空科技&#xff09;投遍了全球的互联网明星企业&#xff0c;并…

关于创建SWAP示例

cd /data 进入指定目录dd if/dev/zero of/data/swapfile bs1M count102400【参数说明】if文件名&#xff1a;输入文件名&#xff0c;缺省为标准输入。即指定源文件。< ifinput file >of文件名&#xff1a;输出文件名&#xff0c;缺省为标准输出。即指定目的文件。< of…

一个公式来说明加接圈的作用和缺点

一个公式来说明加接圈的作用和缺点 在很多视觉项目中&#xff0c;如果想要将视野缩小&#xff0c;一种方式是换用长焦镜头&#xff1b;另一种方式则是通过加接圈的方式来实现。那么&#xff0c;接圈到底改变的是什么参数&#xff0c;能够使图像进行放大呢&#xff1f;核心公式上…

bzoj4636: 蒟蒻的数列

作为惟一一个离线动态开点线段树的。。我是不是没救了。。 维护一下区间修改和区间和。。。 然而由于一些奇怪的原因翻车 到最后索性跑到一个点直接开左右儿子 最后注意区间左右端点可以相等。。。 1 #include<cstdio>2 #include<iostream>3 #include<algorithm…

ubuntu 备忘

卷组扩容 Linux mint采用默认卷组的安装方式 sainLinux ~ $ df -hl Filesystem Size Used Avail Use% Mounted on udev 3.7G 0 3.7G 0% /dev tmpfs 743M 9.5M 733M 2% /run /dev/mapper/mint--vg-root…

DDL DML DCL

2019独角兽企业重金招聘Python工程师标准>>> DDL is Data Definition Language statements. Some examples:数据定义语言&#xff0c;用于定义和管理 SQL 数据库中的所有对象的语言 DML is Data Manipulation Language statements. Some examples:数据操作语言&…

favicon.ico--网站标题小图片二三事

前言: 什么是favicon? 直接用图说话:这个就是favicon favicon.ico 是一种格式&#xff0c;一般用于网页地址栏前或者在标签上以缩略方式显示网站标志&#xff0c;也可以拖曳favicon到桌面以建立到网站的快捷方式。为什么要设置favicon图标&#xff0c;以图像形态显示&#xff…

镜头MTF传递函数解读

什么是镜头的MTF曲线&#xff1f;MTF全称是Modulation Transfer Function&#xff0c;译为调制传递函数&#xff0c;其单位以line/mm来表示。MTF综合反映了镜头的反差和分辨率特性&#xff0c; MTF是用仪器测量的&#xff0c;因而可以完全排除胶片等客观因素的影响和人工判读的…

Java的线程模型

并发不一定要依赖多线程&#xff08;如PHP中很常见的多进程并发&#xff09;&#xff0c;但是在Java里面谈论并发&#xff0c;大多数都与线程脱不开关系。 线程是比进程更轻量级的调度执行单位&#xff0c;线程的引入&#xff0c;可以把一个进程的资源分配和执行调度分开&#…

BT656/BT601/BT1120协议以及DM365/DM355/DM6467上使用的YUV颜色空间说明

ITU-R BT.601和ITU-RBT.656国际电信联盟&#xff08;International Telecommunication Union&#xff09;无线通信部门&#xff08;ITU-R&#xff09;制定的标准。严格来说&#xff0c;ITU-R BT.656应该是隶属ITU-R BT.601的一个子协议。ITU-R BT.601是演播室数字电视编码参数标…

eclispe设置workspace text file encoding

在windows下开发&#xff0c;经常会遇到eclipse新导入的工程 java代码中的注释或者字符串中文显示乱码&#xff0c;每次都要一个个项目更改麻烦&#xff0c;特地找了下&#xff0c;可通过如下方法一次性设置。 转载于:https://www.cnblogs.com/zhjh256/p/7190537.html