在购物车中，添加商品时要实现一个抛物线的动画效果，使用jquery、jquery-fly可以实现该动画效果
下面就贴下简单代码
<!doctype html>
<html>
<head>
<title>购物车抛物线动画效果</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.fly.js"></script>
<script type="text/javascript">
$(function() {
var offset = $("#icon-cart").offset();
$(".addcart").click(function(event) {
var img = $(this).parent().children('img').attr('src'); //获取当前点击图片链接
var flyer = $('<img class="flyer-img" src="' + img + '">'); //抛物体对象
flyer.fly({
start: {
left: event.pageX,//抛物体起点横坐标
top: event.pageY //抛物体起点纵坐标
},
end: {
left: offset.left + 10,//抛物体终点横坐标
top: offset.top + 10, //抛物体终点纵坐标
},
onEnd: function() {
//移除相应的抛物踢对象，不然该对象会显示在结束位置
setTimeout(function(){
$(".flyer-img").remove();
}, 1)
}
});
});
});
</script>
<style>
table{width: 100%;}
tr{text-align: center;}
td{padding: 10px 0;}
#icon-cart {position: absolute;left: 0;bottom: 0;}
.shopping {width: 200px;height: 50px;text-align: center;background-color: #ffcccc;line-height: 50px;}
.flyer-img {width:36px;height: 36px;}
</style>
</head>
<body>
<table>
<tr>
<td>
<div class="per">
<img src="images/1.jpg" width="180" height="240" alt="图片二" />
<h3>¥<span>259.00</span></h3>
<div class="title">你若安好，便是晴天</div>
<a href="javascript:void(0);" class="button orange addcart">加入购物车</a>
</div>
</td>
<td>
<div class="per">
<img src="images/2.jpg" width="180" height="240" alt="图片二" />
<h3>¥<span>136.00</span></h3>
<div class="title">基督山伯爵</div>
<a href="javascript:void(0);" class="button orange addcart">加入购物车</a>
</div>
</td>
</tr>
<tr>
<td>
<div class="per">
<img src="images/3.jpg" width="180" height="240" alt="图片三" />
<h3>¥<span>¥728.00</span></h3>
<div class="title">寂寞吗雪人</div>
<a href="javascript:void(0);" class="button orange addcart">加入购物车</a>
</div>
</td>
<td>
<div class="per">
<img src="images/4.jpg" width="180" height="240" alt="图片四" />
<h3>¥<span>119.00</span></h3>
<div class="title">忽然7日</div>
<a href="javascript:void(0);" class="button orange addcart">加入购物车</a>
</div>
</td>
</tr>
</table>
<div id="icon-cart">
<div class="shopping">购物车</div>
</div>
</body>
</html>