加入到购物车动画效果

1.引入<script src="web/js/jquery.fly.min.js"></script>

js下载地址:http://download.csdn.net/download/muyeju/10048874

<input type="button" value="加入购物车" style="display:inline-block;float:right;" />
<script src="web/js/jquery.fly.min.js"></script>
<script>
$("input").click(function (event) {
    
    var addcar=$(this);
    /** 获取购物车的商品的图片 */
    var img=addcar.parent().parent().find('.item-img').attr('src'); 
    
    //加入到购物车的商品的图片,实际中要动态获取
    var flyer=$('<img class="u-flyer" src="'+img+'" style=" 70px;height: 70px;">');
    flyer.fly({
        start:{
            left:event.pageX,
            top:event.pageY
        },
        end:{
            left:offset.left,
            top:offset.top,
            0,
            height:0
        },
        onEnd: function() {
            $(".u-flyer").remove();
        }
    })
    
})
</script>
原文地址:https://www.cnblogs.com/-scl/p/7767122.html