之前看到一篇推薦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，顧名思義即可。
代碼就不講了，關鍵點都有註釋。
閱讀更多 程序員界的彭于晏 的文章
