leader-line.min.js——用曲线动态连接两个div，指引线、引导线、导航线的简单使用

leader-line.min.js——用曲线动态连接两个div，引导线、导航线的简单使用

这里默认已经引入leader-line.min.js CDN

<script src="http://yourjavascript.com/2592791131/leader-line-min.js"></script>

效果图：

代码如下（在js中添加）：

function createline(startEle, endEle, paths, startPlugs, endPlugs) {// 封装成函数，传入的参数分别是开始点的网页元素、结束点的网页元素、线条的样式、终端的样式
    new LeaderLine(
        LeaderLine.mouseHoverAnchor(startEle, 'draw', {//设置为鼠标移上div上显示事件，想要固定这里的函数换成单独的startEle即可,并且设置下面的hide: false,反之则反。
        animOptions: {
          duration: 1000, //持续时长
          timing: 'ease-in', // 动画函数
        }
        ,// 清除默认的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
          },
      }),
        endEle,
        {
            size: 3,
            path: paths,//线条类型，其他参数见下面表格
            startPlug: startPlugs,//终点样式
            endPlug: endPlugs,
            startPlugColor: '#14A2F5', // 渐变色开始色
            endPlugColor: '#28A745',// 渐变色结束色
            gradient: true, // 使用渐变色
            dash: {animation: true},//设置为虚线，并设置动态效果
            hide: true,
        }
    );
}
var start = document.getElementById('start');//获取开始点的网页元素
var end = document.getElementById('end');//获取结束点的网页元素
createline(start, end, 'fluid', 'behind', 'disc');

参数介绍：

path:参数	含义
straight	直线
arc	一般弧线
fluid	流体曲线
magnet	磁吸线
grid	网格型折线

---

startPlug/endPlug:参数	含义
disc	圆形终端
square	方形终端
arrow1	箭头终端1
arrow2	箭头终端2
arrow3	箭头终端3
hand	手型终端
crosshair	十字标靶型终端
behind	无

其他更多的参数内容，可以去https://anseki.github.io/leader-line/进一步了解，国内有的时候好像访问不了。那就去https://www.npmjs.com/package/leader-line。