使用jquery提供的抛物插件，实现添加商品出现抛物线动画

每次买东西的时候，添加商品到购物车，此时会有一个把东西打包，然后飞到购物车图标的一个动画过程，感觉还是挺有趣的，网上找了几个demo，我在这里就只说如何使用jQuery提供的插件的使用方法

首先你可以根据自己具体的前端页面，来编辑js代码。既然是添加商品，我们就肯定需要找到添加商品的按钮。

我就不给出前端页面代码，直接上jq代码了。当然我们得先引入一个jq提供的插件，可以自己去官网下载，也可以在以下链接进行下载（注：在csdn上传文件一直没通过，只能用百度云了，内附一个伪代码）：

链接: http://pan.baidu.com/s/1i5vcQhR 密码: x7e4

$(function() {
    // 动画结束的位置
    var offset = $("#end").offset();
    // 动画开始的位置也是点击的元素
    $(".addcar").click(function(event){
        var addcar = $(this);
        // 为了实现动画的效果，我们可以先得到商品的图片，然后再压缩图
        var img = addcar.parent().find('img').attr('src');
        var flyer = $('<img class="u-flyer" src="'+img+'">');// 做成一个图片的dom
        // 调用插件
        flyer.fly({
            start: {
                // 动画开始的详细位置
                left: event.pageX,
                top: event.pageY
            },
            end: {
                // 动画结束的详细位置
                left: offset.left+10,
                top: offset.top+10,
                width: 0,
                height: 0
            },
            onEnd: function(){
                // 这里是动画结束的事件，具体如何实现根据需求来定
                $("#msg").show().animate({width: '250px'}, 200).fadeOut(1000);
                addcar.css("cursor","default").removeClass('orange').unbind('click');
                this.destory();// 销毁动画
            }
        });
    });

});

以上就是核心代码，是不是很简单呢….