基于jquery fly插件实现加入购物车抛物线动画效果

$(function() {
        var offset = $("#end").offset();
        $(".addcar").click(function(event){
            var addcar = $(this);
            var img = addcar.parent().find('img').attr('src'); // 获取当前点击图片链接
            var flyer = $('<img class="flyer" src="'+img+'">'); // 抛物体对象
            flyer.fly({
                start: {
                    left: event.clientX, // 抛物体起点横坐标
                    top: event.clientY // 抛物体起点纵坐标
                },
                end: {
                    left: offset.left+10, // 抛物体终点横坐标
                    top: offset.top+10, // 抛物体终点纵坐标
                     0, // 抛物体宽度
                    height: 0 // 抛物体高度
                },
                onEnd: function(){
                    $("#msg").show().animate({ '250px'}, 200).fadeOut(1000); // 成功加入购物车动画效果
                    addcar.css("cursor","default").removeClass('orange').unbind('click'); // 删除加入购物车按钮点击事件
                    this.destory(); // 销毁抛物体
                }
            });
        });
    });

源码地址:https://github.com/chenjiacheng/jquery.fly-demo

原文地址:https://www.cnblogs.com/chenjiacheng/p/6522604.html