边框位移的交互实现
想要实现种,边框随鼠标点击移动到当前元素的位置
主要实现依托于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()
});
});