绘制指引线的JS库leader-line

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