IDC资讯中心代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>js实现商品抛物线动画方式加入购物车</title>
<script src=”jquery-1.9.1.min.js”></script>
<script src=”jquery.fly.min.js”></script>
<style>
.goods {
width: 50px;
height: 50px;
position: absolute;
background: red;
border-radius: 50%;
top: 25%;
}
.cart {
width: 50px;
height: 50px;
position: absolute;
top: 5%;
right: 10%;
text-align:center;
background:url(cart.png);
background-size:50px 50px;
}
.cart div{
color:#f00;
margin-top: 12px;
}
</style>
</head>
<body>
<div class=”goods”></div>
<div class=”goods” style=”left:10%;”></div>
<div class=”cart”><div>0</div></div>
</body>
<script>
var num = 0;
var offset = $(‘.cart’).offset();
$(‘.goods’).click(function (event) {
var img = $(this).parent().children(‘img’).attr(‘src’); //获取当前点击图片链接
var flyer = $(‘<img class=”flyer-img” src=”cart.png” width=”26″ height=”26″>’); //抛物体对象
flyer.fly({
start: {
left: event.pageX,
top: event.pageY
},
end: {
left: offset.left,
top: offset.top,
width: 0,
height: 0
},
onEnd: function () {
setTimeout(function () {
num ++;
$(‘.cart>div’).html(num);
}, 200);
}
});
});
</script>
</html>
里面的jquery-1.9.1.min.js、jquery.fly.min.js、cart.png请大家网上搜索一下。
js实现商品抛物线动画方式加入购物车
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com 特别注意：本站所有转载文章言论不代表本站观点！ 本站所提供的图片等素材，版权归原作者所有，如需使用，请与原作者联系。未经允许不得转载：IDC资讯中心 » js实现商品抛物线动画方式加入购物车
