前言

之前看到一篇推荐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元素节点而已。

完整示例代码

<html lang="zh-cn">
<head>
<title>test</title>
<style>
#start {
left: 0;
top: 0;
}
#end {
right: 0;
bottom: 0;
}
#start,#end{
position: fixed;
width: 60px;
height: 60px;
background-color: red;
color: #fff;
line-height: 60px;
text-align: center;
}
</style>
</head> <body>
<div id="start">开始点</div>
<div id="end">结束点</div>
<script src="https://magi.com/assets/thirdparty/leader-line.min.js"></script>
<script>
new LeaderLine(
document.getElementById('start'),
document.getElementById('end')
);
</script>
</body>
</html>

当然也可以输入更多的参数来绘制各种各样的指引线:

具体的使用方法可以去查看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年之后你看到这篇文章,也许功能失效了,到时候别忘了给我发个短消息提醒我一下。

这里有个英文版的介绍和使用说明 : https://anseki.github.io/leader-line/  ,如果英文不好的,可以使用百度翻译看看,比较有帮助.

出处:https://www.cnblogs.com/vvjiang/p/11850980.html

绘制指引线的JS库leader-line的更多相关文章

  1. 安利一个绘制指引线的JS库leader-line

    前言 之前看到一篇推荐Magi这个搜索引擎的新闻,对于这个搜索引擎是否好用咱们不予置评,但是我在这个搜索引擎上面发现了一个好玩的前端功能. 如上图,将鼠标浮动到学习来源上时,会展示一堆指引线. 本博客 ...

  2. 绘制3D的js库

      有哪些值得推荐的绘制3D的js库?   4 个回答 默认排序​ 草皮子 HTML5/GAME 4 人赞同了该回答 只用过three.js,所以推荐这个.不清楚你打算用来做什么,总的来说,得看你的运 ...

  3. 轻量级的绘制图表js库--Morris.js

    Morris.js 是一个轻量级的 JS 库,使用 jQuery 和 Raphaël 来生成各种时序图. 虽说现在移动手机网络已经到了4G,但是在移动web客户端开发过中,为了达到良好的体验效果,需要 ...

  4. 【转载】写一个js库需要怎样的知识储备和技术程度?

    作者:小爝链接:https://www.zhihu.com/question/30274750/answer/118846177来源:知乎著作权归作者所有,转载请联系作者获得授权. 1,如何编写健壮的 ...

  5. 如何在Webstorm中添加js库 (青瓷H5游戏引擎)

    js等动态语言编码最大的缺点就是没有智能补全代码,webstorm做到了. qici_engine作为开发使用的库,如果能智能解析成提示再好不过了,经测试80%左右都有提示,已经很好了. 其他js库同 ...

  6. Ajax实现xml文件数据插入数据库(一)--- 构建解析xml文件的js库

    Ajax实现将xml文件数据插入数据库的过程所涉及到的内容比较多,所以对于该过程的讲解本人打算根据交互的过程将其分为三个部分,第一部分为构建解析xml文件的javascript库,第二部分为ajax与 ...

  7. Vue.js库的第一天的学习

    一,vue.js简介 Vue.js可以作为一个js库来使用,也可以用它全套的工具来构建系统界面,这些可以根据项目的需要灵活选择 所以说, vue.js是一套构建用户界面的渐进式框架 Vue.js的核心 ...

  8. 前端之Vue.js库的使用

    vue.js简介 Vue.js读音 /vjuː/, 类似于 view Vue.js是前端三大新框架:Angular.js.React.js.Vue.js之一,Vue.js目前的使用和关注程度在三大框架 ...

  9. 深入理解Three.js中线条Line,LinLoop,LineSegments

    前言 在可视化开发中,无论是2d(canvas)开发还是3d开发,线条的绘制应用都是比较普遍的.比如绘制城市之间的迁徙图,运行轨迹图等.本文主要讲解的是Three.js中三种线条Line,LineLo ...

随机推荐

  1. windows下sed回车换行符处理

    windows下sed回车换行符处理如果用sed for windows对整个文件进行了编辑,编辑之后一般需要处理回车换行符:rem windows的回车换行符是\r\n,linux的是\n,所以要替 ...

  2. [LeetCode] 263. Ugly Number 丑陋数

    Write a program to check whether a given number is an ugly number. Ugly numbers are positive numbers ...

  3. Codeforces Round #607 (Div. 1) Solution

    从这里开始 比赛目录 我又不太会 div 1 A? 我菜爆了... Problem A Cut and Paste 暴力模拟一下. Code #include <bits/stdc++.h> ...

  4. Python遥感数据主成分分析

    原文:http://www.cnblogs.com/leonwen/p/5158947.html 该算法由MatLab移植而来(具体参见上一篇博文).但是最终输出结果却和MatLab不一致,经排查发现 ...

  5. SpringBoot2配置prometheus浏览器访问404

    背景:SpringBoot2的项目要配置 actuator + prometheus的健康检查,按照教程配置好之后再浏览器测试 http://localhost:port/prometheus 后40 ...

  6. APP 链接ROS时出现pymongo.errors.ServerSelectionTimeoutError: localhost:27017 错误

    ROS版本上kinetic ,APP是官网开源的make a map,当app链接ROS进行建图时,会出现报错:pymongo.errors.ServerSelectionTimeoutError: ...

  7. 【RS】Automatic recommendation technology for learning resources with convolutional neural network - 基于卷积神经网络的学习资源自动推荐技术

    [论文标题]Automatic recommendation technology for learning resources with convolutional neural network ( ...

  8. setInterval()调用其他函数时候报错

    (function(){ function shortcut() { // 配件优化 window.topValue = 0// 上次滚动条到顶部的距离 window.interval = null; ...

  9. scala高级部分--题目1

    给你一个集合val list=List(1,2,3,4,"abc"),请完成如下要求 将集合list中所有的数字+1,并返回一个新的集合 要求忽略掉非数字的 object work ...

  10. 【华为云实战开发】8.如何快速搭建C#网站并实现持续集成?【华为云技术分享】

    1 概述 1.1 文章目的 本文通过一个实例介绍如何使用软件开发服务DevCloud完成一个C#Web项目的开发. 1.2 项目详情 1. 项目名称:超级冷笑话网站 2. 项目简介:一个Web网站,包 ...