leaderLine

back | github

使用起来也非常方便：

<script src="leader-line.min.js"></script>
<script>
 new LeaderLine(
 document.getElementById('start'),
 document.getElementById('end')
 );
</script>

示例代码：

// 生成目录上的指引线
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()
 }
 })
}