之前看到一篇推薦Magi這個搜尋引擎的新聞，對于這個搜尋引擎是否好用咱們不予置評，但是我在這個搜尋引擎上面發現了一個好玩的前端功能。
如上圖，将滑鼠浮動到學習來源上時，會展示一堆指引線。
本部落格的右側文章目錄也內建了這個功能，諸位可以玩一玩。
當時覺得這個功能很好玩，而且前端領域其實這種指引線還是有很多用處的，比如新手指引，功能指引，腦圖之類的功能。
鑒于以後很可能需要用到，當時就調試了一下這個網站，發現使用了leader-line這個庫。
然後百度了一下，發現網上也沒什麼人介紹這個庫，是以這裡寫個安利文吧。
LeaderLine
這個庫在Github上的介紹很簡單：
Draw a leader line in your web page.
意思就是在網頁上畫指引線。
使用起來也非常友善：
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，顧名思義即可。
代碼就不講了，關鍵點都有注釋。