js实现商品抛物线动画方式加入购物车-Javascript-技术教程-asp编程网

js实现商品抛物线动画方式加入购物车

2017-11-29 17:08:29 来源：网络作者：佚名浏览量:3369 收藏

代码如下：
<!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实现商品抛物线动画方式加入购物车

最新相关教程

热门教程

推荐教程