正文 1939字数 233,833阅读


Github leader-line

使用：
<script src="leader-line.min.js"></script> <script> new LeaderLine( document.getElementById('start'), document.getElementById('end') ); </script>
Run code
Cut to clipboard


    示例代码
    // 生成目录上的指引线 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() } }) }
    Run code
    Cut to clipboard


      LeaderLine官方文档
      PlainDraggable拖拽拖动移动组件官方文档
      Magi搜索引擎

      作者：韩子卢
      出处：https://www.cnblogs.com/vvjiang/
      本博客文章均为作者原创，转载请注明作者和原文链接。