jq flyer.fly()抛物线加入购物车动画效果

首先需要引入jq  jar包（百度搜索下载即可）

<script type="text/javascript" src="../../js/jquery-1.10.1.min.js"></script>

<script src="../../js/jquery.fly.min.js"></script>

<style type="text/css">

.u-flyer {
display: block;
width: 50px;
height: 50px;
border-radius: 50px;
position: fixed;
z-index: 9999;
}
#msg {
position: fixed;
top: 300px;
right: 35px;
z-index: 10000;
width: 1px;
height: 52px;
line-height: 52px;
font-size: 20px;
text-align: center;
color: #fff;
background: #360;
display: none
}

</style>                                          

              <div class="busidetail-body">

    <div class="busidetail-body-left">
<img src="../../img/u41_05.png" />
</div>
<div class="busidetail-body-right">
<h4>海南芝麻香蕉一斤约三根左右</h4>
<p>香甜诺的香蕉哟</p>
<p>月售130份 好评率100%</p>
<p>
<span id="" class="bbr-spanxxf">
限一份
</span>
</p>
<h5>
<b>￥2.99</b>
<del>￥5.89</del>
<div class="right">
<img class="rightimg" src="../../img/u41_04.png" />
</div>
</h5>
</div>

</div>

                                        <footer>
                    <nav class="mui-bar mui-bar-tab busidetail-foot">
            <img class="busidetail-foot-img" src="../../img/lanzi.png" />
        未选购商品
            <div class="busidetail-foot-right">￥20起送</div>
            <div id="msg">已成功加入购物车！</div>
                </nav>

                        </footer>

                        <script type="text/jscript">

$(function() {
var offset = $(".busidetail-foot-img").offset(); //结束的地方的元素
$(".rightimg").click(function(event) { //是$("#rightimg")这个元素点击触发的 开始动画的位置就是这个元素的位置为起点
var addcar = $(".busidetail-body-left");
var img = addcar.find('img').attr('src');
var flyer = $('<img class="u-flyer" src="' + img + '">');
flyer.fly({
start: {
left: event.clientX,
top: event.clientY
},
end: {
left: offset.left+20,
top: offset.top+20,
width: 0,
height: 0
},
onEnd: function() {
$("#msg").show().animate({
width: '250px'
}, 200).fadeOut(1000);
addcar.css("cursor", "default").removeClass('orange').unbind('click');
this.destory();
}
});
$(".busidetail-foot-img").attr('src',"../../img/lanzi_active.png");
});
});
</script>