安利一个绘制指引线的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( ...
随机推荐
- centos7 安装 mysql5.7 版本(全)
centos 安装 版本说明 :centos7,mysql5.7 ,不是 centos7 可能有些命令不兼容 安装 mysql-server # 下载并安装 mysql yum wget -i -c ...
- django中CBV
08.13自我总结 django中CBV 一.django处理业务逻辑的两种方式 FBV (function based views):使用函数来处理业务逻辑 CBV (class based vie ...
- (未完)经典Web漏洞实战演练靶场笔记
记录下自己写的经典Web漏洞靶场的write up,包括了大部分的经典Web漏洞实战场景,做个笔记. 0x01 任意文件下载漏洞 if(!empty($_GET['filename'])){ $fil ...
- win2008加入域控之尝试解析加入域中域控制器的dns名称失败解决办法
记录下今天遇到以前没遇到的问题 加入域的时候提示“尝试解析加入域中控制器的DNS”名称失败 可能的原因: 如果确认dns没问题 dc正常访问,那可能就是因为域控制器无法向dns注册srv记录. SRV ...
- Git基本使用指南
一.概述 1. Git与SVN比较 目前用到最广泛的版本控制软件就是SVN和Git,那么这两者之间有什么不同之处呢? 1) SVN(Subversion)是集中式管理的版本控制器,而Gi ...
- art-template的循环操作
art-template的官方文档(网址:https://aui.github.io/art-template/docs/)中对循环的介绍如下: 循环 标准语法 {{each target}} {{$ ...
- 百万年薪python之路 -- HTML基础
一. Web标准 web标准: w3c:万维网联盟组织,用来制定web标准的机构(组织) web标准:制作网页遵循的规范 web标准规范的分类:结构标准.表现标准.行为标准. 结构:html.表示:c ...
- PSTAT 115 Homework4 课业解析
PSTAT 115 Homework4 课业解析 题意: 蒙特卡洛采样之拒绝采样 解析: 给定一个概率分布p(z)=p~(z)/Zp,p~(z)已知,Zp为归一化常数,为未知数.对该分布进行拒绝采样, ...
- 记录一次诡异的Maven Profile不生效的问题
记录一次诡异的Maven Profile不生效的问题 现象 maven 打包之后,复制的 profile对应的resource文件总是不正确的. 即便是加了 mvn clean package -P ...
- git的使用和常用命令
git介绍 git 是一个免费开源的分布式版本控制系统 git可以实现各个版本之间的来回穿梭 git可以远程托管代码 git可以完成团队合作 workspace --add--> index - ...