某些电商网站加入购物车和减少购物车商品数量时，有个小动画，以抛物线形式增减，如图：
这里用到了第三方jQuery.Fly.js插件（底层依赖Jquery库，地址：https://github.com/amibug/fly/blob/master/src/fly.js），使用方法直接上代码，自己体验：
引入js库：
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="fly.js" type="text/javascript"></script>
</head>
Html代码：
<body style="text-align: center;">
<div id="divSource">
<div>
<img src="http://images.yummy77.com/img/111012/111012068/g1_150_6.jpg"></img><input type="button" VALUE="add"></input><input type="button" VALUE="remove"></input>
</div>
<div>
<img src="http://images.yummy77.com/img/111011/111011111/g1_150.jpg"></img><input type="button" VALUE="add"></input><input type="button" VALUE="remove"></input>
</div>
<div>
<img src="http://images.yummy77.com/img/211110/211110060/g1_150.jpg"></img><input type="button" VALUE="add"></input><input type="button" VALUE="remove"></input>
</div>
</div>
<div id="divTarget" style="width:60px;height:60px; background: #ddd;margin:20px;">快到碗里来……</div>
</body>
自定义JS代码：
<script type="text/javascript">
$(function(){
$("#divSource input[value='add']").bind("click",function(){
var _sourceImg=$(this).prev();
var _back=function(){};
var _target=$("#divTarget");
objectFlyIn(_sourceImg,_target,_back);
});
$("#divSource input[value='remove']").bind("click",function(){
var _sourceImg=$(this).prev().prev();
var _back=function(){};
var _target=$("#divTarget");
objectFlyOut(_sourceImg,_target,_back);
});
/**
* 对象飞入
*
*/
function objectFlyIn(_sourceImg,_target, _back) {
var addOffset =_target.offset(); var img = _sourceImg;
var flyer = $('<img style="display: block;width: 50px;height: 50px;border-radius: 50px;position: fixed;z-index: 100000;" src="' + img.attr('src') + '">');
var X,Y; if(img.offset()){
X = img.offset().left - $(window).scrollLeft();
Y = img.offset().top - $(window).scrollTop();
}
flyer.fly({
start: {
left: X + img.width() / 2 - 25, //开始位置（必填）
top: Y + img.height() / 2 - 25 //开始位置（必填）
},
end: {
left: addOffset.left + 10, //结束位置（必填）
top: addOffset.top + 10, //结束位置（必填）
width: 10, //结束时宽度
height: 10 //结束时高度
},
onEnd: function () { //结束回调
this.destroy(); //移除dom
_back();
}
}); } /**
* 对象飞出
*
*/
function objectFlyOut(_sourceImg,_target, _back) {
var addOffset = _target.offset(); var img = _sourceImg;
var flyer = $('<img style="display: block;width: 50px;height: 50px;border-radius: 50px;position: fixed;z-index: 100000;" src="' + img.attr('src') + '">'); flyer.fly({
start: {
left: addOffset.left, //开始位置（必填）
top: addOffset.top //开始位置（必填）
},
end: {
left: addOffset.left-20, //结束位置（必填）
top: addOffset.top-20, //结束位置（必填）
width: 5, //结束时宽度
height: 5 //结束时高度
},
onEnd: function () { //结束回调
this.destroy(); //移除dom
_back();
}
});
} })
</script>