安利一个绘制指引线的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( ...
随机推荐
- SQL Server 2012企业版和标准版的区别
关于使用Microsoft SQL Server 数据库的公司一般会有疑问,企业版数据库和标准版数据库的区别在哪?如果采购企业版的价格和标准版的价格相差很大,从多方资料查询发现,我认为最主要的区别是硬 ...
- 爬虫 xpath
xpath简介 1.xpath使用路径表达式在xml和html中进行导航 2.xpath包含标准函数库 3.xpath是一个w3c的标准 xpath节点关系 1.父节点 2.字节点 3.同胞节点 4. ...
- VMware ESXI6.0服务器安装系列:U盘安装问题汇总之网卡驱动安装
本文转载至:http://blog.51cto.com/huanwenli/1749298 在给物理服务器安装ESXI的过程中经常会遇到网卡驱动问题,如果是买的是Dell.HP.IBM等厂商的服务器, ...
- RSA-演变过程、原理、特点(加解密及签名)及公钥私钥的生成
本篇是iOS逆向开发总结的第一篇文章,是关于iOS密码学的相关技术分析和总结,希望对大家有所帮助,如果有错误地方欢迎指正. 一.前言 密码学的历史追溯到2000年前,相传古罗马凯撒大帝为了防止敌方截获 ...
- Python多线程多进程那些事儿看这篇就够了~~
自己以前也写过多线程,发现都是零零碎碎,这篇写写详细点,填一下GIL和Python多线程多进程的坑~ 总结下GIL的坑和python多线程多进程分别应用场景(IO密集.计算密集)以及具体实现的代码模块 ...
- 【Cocos2d-x】学习笔记目录
从2019年7月开始学习游戏引擎Cocos2dx,版本3.17. 学习笔记尽量以白话的形式表达自己对源码的理解,而不是大篇幅复制粘贴源码. 本人水平有限,欢迎批评指正! Cocos2d-x 学习笔记 ...
- php和apache的关系是什么?
例如我们在自己的电脑里练习如何做网站的时候,我们需要搭建一个本地环境,这个本地环境就是PHP+APACHE + MYSQL的环境,这样就可以让我们的电脑拥有PHP要求的运行环境了.那么php和apac ...
- 从Go语言编码角度解释实现简易区块链
区块链技术 人们可以用许多不同的方式解释区块链技术,其中通过加密货币来看区块链一直是主流.大多数人接触区块链技术都是从比特币谈起,但比特币仅仅是众多加密货币的一种. 到底什么是区块链技术? 从金融学相 ...
- Apache常见配置
一.yum安装与配置 1.1安装: [root@apache ~]# yum install http\* -y [root@apache ~]# echo "test01" ...
- springboot 打jar包时分离配置文件
修改pom.xml文件 <build> <resources> <resource> <directory>src/main/resources< ...