leader-line.js是一款网页指引线绘制插件-BFW插件库

leader-line.js是一款网页指引线绘制插件

leader-line.js是一款网页指引线绘制插件，可以自定义线条样式、颜色、箭头、阴影、渐变、悬浮动画等效果，非常强大。适合作为新手指引，功能指引，脑图之类的功能。

使用方式：

1、引入

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/leader-line.min.js"></script>

2、准备dom

  <div id="start"  class="target">start</div>
    <div id="end" class="target">end</div>

3、css

  .target {
          display: inline-block;
          padding: 12px;
          background-color: #9ee7ea;
          width: 100px;
        }
        #end {
              float: right;
              margin-top: 200px;
            }

4、js绘制引导线

    <script type="text/javascript">
        // Add new leader line from `start` to `end` (HTML/SVG element, basically).
        new LeaderLine(
          document.getElementById('start'),
          document.getElementById('end')
        );
    </script>

完整代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/leader-line.min.js"></script>

    <style>
     .target {
          display: inline-block;
          padding: 12px;
          background-color: #9ee7ea;
          width: 100px;
        }
        #end {
              float: right;
              margin-top: 200px;
            }
    </style>
</head>

<body>
    <div id="start"  class="target">start</div>
    <div id="end" class="target">end</div>

    <script type="text/javascript">
        // Add new leader line from `start` to `end` (HTML/SVG element, basically).
        new LeaderLine(
          document.getElementById('start'),
          document.getElementById('end')
        );
    </script>
</body>

</html>

github地址https://github.com/anseki/leader-line