安利一个绘制指引线的JS库leader-line
前言
之前看到一篇推荐Magi这个搜索引擎的新闻,对于这个搜索引擎是否好用咱们不予置评,但是我在这个搜索引擎上面发现了一个好玩的前端功能。
如上图,将鼠标浮动到学习来源上时,会展示一堆指引线。
本博客的右侧文章目录也集成了这个功能,诸位可以玩一玩。
当时觉得这个功能很好玩,而且前端领域其实这种指引线还是有很多用处的,比如新手指引,功能指引,脑图之类的功能。
鉴于以后很可能需要用到,当时就调试了一下这个网站,发现使用了leader-line这个库。
然后百度了一下,发现网上也没什么人介绍这个库,所以这里写个安利文吧。
LeaderLine
这个库在Github上的介绍很简单:
Draw a leader line in your web page.
意思就是在网页上画指引线。
使用起来也非常方便:
<script src="leader-line.min.js"></script>
<script>
new LeaderLine(
document.getElementById('start'),
document.getElementById('end')
);
</script>
new一个LeaderLine对象即可,只需要输入两个dom元素节点而已。
当然也可以输入更多的参数来绘制各种各样的指引线:
具体的使用方法可以去查看lead-line的Github地址,这里就不赘述了。
而且这个库本身就提供了hover绘制指引线的功能,并且能偏移起始点和结束点的位置,同时当起始点和结束点变动时,也可以实时调整指引线。
这两个功能可以将鼠标hover到右侧的文章目录上,然后滚动鼠标轮来查看效果。
原理
这个库的实现原理其实很简单,根据提供的两个dom元素,找到这两个dom元素的位置,然后通过svg在body下绘制一条指引线。
这个库虽然只是个js,但是在引入后会将一些样式写到一个id为leader-line-defs的svg元素内。
这些指引线使用了一个叫leader-line的样式class,如果绘制指引线时出现遮挡情况,可以通过调整这个样式class的z-index或者position来处理。
可以预想一下,这些指引线都是position:absolute的,因为position:fixed的元素在滚动时肯定会存在问题。
原理都讲了,所以诸位请在页面有fixed元素或者absolute元素时,仔细查看指引线是否会与这些元素产生遮挡。
示例代码
这里就以我博客右侧目录集成的指引线功能作为示例代码:
// 生成目录上的指引线
function createCatalogLeaderLine($h2Arr) { // $h2Arr是一个dom元素集合,注意不是数组哦
// lines的目的是为了保留leader-line变量,方便重绘
var lines = {};
var options = {
color: '#5bf', // 指引线颜色
endPlug: "disc", // 指引线结束点的样式
size: 2, // 线条尺寸
startSocket: "left", //在指引线开始的地方从元素左侧开始
endSocket: "right", //在指引线开始的地方从元素右侧结束
hide:true // 绘制时隐藏,默认为false,在初始化时可能会出现闪烁的线条
};
[].slice.call($h2Arr).forEach(function (item) {
var anchor = LeaderLine.mouseHoverAnchor(document.getElementById('catalog' + item.id), 'draw', {
// 指引线动效
animOptions: {
duration: 500
},
// 清除默认的hover样式
hoverStyle:{
backgroundColor: null
},
// 起始点样式,这里为了清除默认样式
style: {
paddingTop: null,
paddingRight: null,
paddingBottom: null,
paddingLeft: null,
cursor: null,
backgroundColor: null,
backgroundImage: null,
backgroundSize: null,
backgroundPosition: null,
backgroundRepeat: null
},
// 当起始点被hover时调用的事件
onSwitch: function (event) {
var line = lines[item.id]
// 浮动上去就重绘
if (event.type == "mouseenter") {
line.position();
}
}
});
lines[item.id] = new LeaderLine(
anchor,
document.getElementById(item.id),
options
);
})
// 滚动时重绘指引线
$(window).scroll(function () {
for (var key in lines) {
lines[key].position()
}
})
}
其中LeaderLine.mouseHoverAnchor为leader-line提供的api,顾名思义即可。
代码就不讲了,关键点都有注释。
总结
没什么好总结的,这里发一个小吐槽。
其实我博客集成这个功能时,最开始是直接把这个库的js复制粘贴到了博客园的自定义js代码中,没想到博客园这方面做了大小限制。
所以我就把Magi这个搜索引擎的引用地址拿来用了,万一哪天这个搜索引擎不能用了或者js地址变了那么我目录的指引功能可能就挂了。
N年之后你看到这篇文章,也许功能失效了,到时候别忘了给我发个短消息提醒我一下。
安利一个绘制指引线的JS库leader-line的更多相关文章
- 绘制指引线的JS库leader-line
前言 之前看到一篇推荐Magi这个搜索引擎的新闻,对于这个搜索引擎是否好用咱们不予置评,但是我在这个搜索引擎上面发现了一个好玩的前端功能. 如上图,将鼠标浮动到学习来源上时,会展示一堆指引线. 本博客 ...
- impress.js 一个创建在线幻灯的js库
真的好奇怪,我居然会写前端技术的博客.没有办法的,最近实习,看的大多是前端.所以今天就用这个来练练手了. Impress.js 是一个非常棒的用来创建在线演示的Javascript库.它基于CSS3转 ...
- 一个流行的网页动画JS库
animejs https://animejs.com/ Anime.js (/ˈæn.ə.meɪ/) is a lightweight JavaScript animation library wi ...
- 一个构建XML对象的js库
初学javascript,学习中用到在IE中建立XML对象,于是写了一个简单的“库”.因为水平所限,肯定会有不恰当的地方,欢迎指正. 如果大家有知道现存的更好的东西,非常希望大家能将它推荐给我. 代码 ...
- 利用moment为基础,基于DOM实现一个多个倒计时同时进行的js库方便使用
moment非常强大,提供了很多时间方法的封装,项目需要一个小倒计时的功能,网上找了很多不合适,决定自己写一个,直接上代码 //定义一个立即执行的函数(function () { var Ticts= ...
- 【转载】写一个js库需要怎样的知识储备和技术程度?
作者:小爝链接:https://www.zhihu.com/question/30274750/answer/118846177来源:知乎著作权归作者所有,转载请联系作者获得授权. 1,如何编写健壮的 ...
- 绘制3D的js库
有哪些值得推荐的绘制3D的js库? 4 个回答 默认排序 草皮子 HTML5/GAME 4 人赞同了该回答 只用过three.js,所以推荐这个.不清楚你打算用来做什么,总的来说,得看你的运 ...
- typescript+webpack构建一个js库
依赖说明 入口文件 tsconfig配置 webpack配置文件 webpack入口文件配置 webpack为typescript和less文件配置各自的loader webpack的output配置 ...
- 仿照jquery封装一个自己的js库(二)
本篇为完结篇.主要讲述如何造出轮子的高级特性. 一. css方法的高级操作 先看本文第一部分所讲的dQuery css方法 //css方法 dQuery.prototype.css=function( ...
随机推荐
- Ubuntu16.04安装Docker、nvidia-docker
Ubuntu16.04安装Docker.nvidia-docker Docker安装 1.更换国内软件源,推荐中国科技大学的源,稳定速度快(可选) sudo cp /etc/apt/sources.l ...
- python编程基础之三十二
成员方法:成员方法就是一个函数,只是作用域在类内,并且第一个参数必须是self,self代表当前对象, class Dog(object): def bark(self): #成员方法,第一个参数必须 ...
- POST PUT 小解
POST 主要是用来提交数据让服务器进行处理的,PUT主要是请求数据的. POST 提交的数据放在HTTP正文里面,而PUTT提交的数据放在url里面.
- (21)ASP.NET Core EF创建模型(关系)
1.关系 关系定义两个实体之间的关系.在关系型数据库中,这由外键约束表示. 2.术语定义 有许多术语用于描述关系:●相关实体:这是包含外键属性的实体.有时称为关系的"子级".●主体 ...
- php好在哪?
PHP即“超文本预处理器”,是一种通用开源脚本语言.PHP是在服务器端执行的脚本语言,与C语言类似,是常用的网站编程语言.PHP独特的语法混合了C.Java.Perl以及 PHP 自创的语法.利于学习 ...
- python深拷贝与浅拷贝的区别
可变对象:一个对象在不改变其所指向的地址的前提下,可以修改其所指向的地址中的值 不可变对象:一个对象所指向的地址上值是不能修改的,如果你修改了这个对象的值,那么它指向的地址就改变了,相当于你把这个对象 ...
- C#详解类型,变量与对象
本节内容: 1.什么是类型(Type) 2.类型在C#语言中的作用 3.C#语言的类型系统 4.变量.对象与内存 1.什么是类型(type) 类型又名数据类型(Date Type),是数据在内存中存储 ...
- 基础安全术语科普(五)——crypter
crypter(加壳):使病毒逃过反病毒软件检测的技术 UD类加壳病毒:只有%50至%25的软件能检测出是病毒. FUD类加壳病毒:完全不会被检测出来. 加壳技术有两个主要组件: 1.client — ...
- [UWP]使用GetAlphaMask制作阴影
1. 前言 最近常常接触到GetAlphaMask,所以想写这篇文章介绍下GetAlphaMask怎么使用.其实GetAlphaMask的使用场景十分有限,Github上能搜到的内容都是用来配合Dro ...
- 继承+派生+分类+钻石继承(day20)
目录 昨日内容 面对对象编程 类 定义类时发生的事情 调用类时发生的事情 init 对象 对象查找类的属性的顺序 对象的绑定方法 python中万物皆对象 今日内容 继承 什么是继承 为什么要继承 如 ...