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

代码如下：
<
!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(http://www.aspbc.com/Index/showtech/id/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="http://www.aspbc.com/Index/showtech/id/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、http://www.aspbc.com/Index/showtech/id/cart.png请大家网上搜索一下。