某些电商网站加入购物车和减少购物车商品数量时，有个小动画，以抛物线形式增减，如图：
这里用到了第三方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="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; 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, //结束位置（必填） 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; 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, //结束位置（必填） 5, //结束时宽度 height: 5 //结束时高度 }, onEnd: function () { //结束回调 this.destroy(); //移除dom _back(); } }); } }) </script>