直接上代码,需自行引入jq
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.container{
height: 400px;
width: 500px;
margin: 0 auto;
margin-top: 100px;
position: relative;
}
.reduce,
.plus{
width: 20px;
padding: 5px;
position: absolute;
right: 0;
top: 0;
}
.reduce{
transition: all 0.4s linear;
opacity: 0;
}
.reduce.show{
opacity: 1;
transform: translate3d(-50px,0,0);
}
.reduce.show img{
transform: rotate(-180deg);
}
.number{
position: absolute;
right: 30px;
top: 0;
display: inline-block;
line-height: 34px;
width: 20px;
text-align: center;
display: none;
}
.reduce img,
.plus img{
width: 100%;
transition: all 0.4s linear;
}
.cart{
position: absolute;
bottom: 0;
left: 0;
width: 40px;
height: 40px;
border-radius: 50%;
background: #008ADD;
font-size: 12px;
color: #fff;
}
.cart img{
width: 30px;
height: 30px;
margin-left: 5px;
margin-top: 5px;
}
.balls{
position: absolute;
bottom: 30px;
left: 11px;
}
.ballcontainer{
position: absolute;
left: 0;
top: 0;
width: 20px;
height: 20px;
display: none;
transition: all 0.4s cubic-bezier(0.49,-0.29,0.75,0.41);
}
.ballcontainer[show=false]{
display: none;
}
.balls .ball{
width: 20px;
height: 20px;
background: #008ADD;
border-radius: 50%;
transition: all 0.4s linear;
}
</style>
</head>
<body>
<div class="container">
<div class="reduce" onclick="reduce()">
<img src="reduce.png"/>
</div>
<span class="number">0</span>
<div class="plus" onclick="plus(this)">
<img src="plus.png"/>
</div>
<div class="cart">
<img src="cart.png"/>
</div>
<!--5个小球,用户快速点击时可同时存在多个-->
<div class="balls">
<div class="ballcontainer" show="false"><div class="ball"></div></div>
<div class="ballcontainer" show="false"><div class="ball"></div></div>
<div class="ballcontainer" show="false"><div class="ball"></div></div>
<div class="ballcontainer" show="false"><div class="ball"></div></div>
<div class="ballcontainer" show="false"><div class="ball"></div></div>
</div>
</div>
</body>
<script src="../js/jquery.min.js"></script>
<script type="text/javascript">
function plus(el){
var oldNumber = parseInt($('.number').text());
oldNumber++;
$('.number').show();
$('.number').text(oldNumber);
$('.reduce').addClass('show');
drop(el);
}
function reduce(){
var oldNumber = parseInt($('.number').text());
oldNumber--;
if(oldNumber <= 0){
oldNumber = 0;
$('.number').hide();
$('.reduce').removeClass('show');
}
$('.number').text(oldNumber);
}
function drop(el){
var ballcontainers = $(".ballcontainer");
var offset = $(el).offset();
var oldoffset = $('.balls').offset();//获取小球的起始位置
for (var i = 0;i < ballcontainers.length; i++) {
if($(ballcontainers[i]).attr('show') == 'false'){
$(ballcontainers[i]).attr('show','true');
var y = -(oldoffset.top - offset.top);
var x = offset.left - oldoffset.left;
$(ballcontainers[i]).css('webkitTransform','translate3d(0,'+ y +'px,0)');
$(ballcontainers[i]).children('.ball').css('webkitTransform','translate3d(' + x + 'px,0,0)');
$(ballcontainers[i]).css('display','block');
setTimeout(function(){//不加这个看不见小球
$(ballcontainers[i]).css('webkitTransform','translate3d(0,0,0)');
$(ballcontainers[i]).children('.ball').css('webkitTransform','translate3d(0,0,0)');
},10)
var rf = $(ballcontainers[i]).offset();//未使用,仅仅用来触发浏览器重绘,不加这个会有问题
return;
}
}
}
$('.ballcontainer .ball').on('transitionend',function(){
$(this).closest('.ballcontainer').css('display','none');
$(this).closest('.ballcontainer').attr('show','false');
})
// console.log(document.getElementsByClassName('plus')[0].getBoundingClientRect())//getBoundingClientRect可以获取元素的位置
</script>
</html>