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。