边框位移交互实现

想要实现种，边框随鼠标点击移动到当前元素的位置

主要实现依托于JQuery的 position() 方法，通过position()可以获取到相对于父元素的相对距离
父元素必须申明position: relative; ，position()才可返回有效值

HTML代码

 <div class="box">
     <div class="title">字母</div>
     <div class="items">
         <span class="cir"></span>
         <span>全部</span>
         <span>A</span>
         <span>B C</span>
         <span>D E F</span>
         <span>G H I J</span>
         <span>K L M N O</span>
         <span>P Q R S T U</span>
         <span>V W X Y Z</span>
     </div>
 </div>

css

 .box{
     position: relative;
     padding: 5px 10px;

     .title {
         line-height: 40px;
         font-size: 18px;
         font-weight: bold;
     }
     .items{
         position: relative;
         display: flex;
         flex-wrap: wrap;

         span {
             padding: 3px 7px;
             font-size: 14px;
             cursor: pointer;
         }
         .cir {
             position: absolute;
             width: 42px;
             height: 25px;
             box-shadow: 0 0 0 1px @color_hv inset;
             transition: .2s all ease;
         }
     }
 }

js

//关键词点击
$('.items span').on('click', function() {
    var $cir = $(this).siblings('.cir');
    var thisPos = $(this).position();

    $cir.css({
        'transform': 'translate(' + thisPos.left + 'px, ' + thisPos.top + 'px)',
        'width': $(this).innerWidth(),
        'height': $(this).innerHeight()
    });
});