加入购物车 动画效果插件 - 解决滚动时的问题

分类:Javascript |

源码 : https://github.com/amibug/fly/


其实直接就能用,但当购物车的图标出现在底部时会缺少scroll 部分的值


我调试后的代码,以提供一些思路:基于 jQuery

var fly = function (event, _this) {
        var offset = $(".J_cart_box").offset();
        var addcar = _this;
        var img = addcar.parent().parent().find('img').attr('src');
        var flyer = $('<img class="cart-flyer" src="' + img + '">');
        var event_left = event.pageX;
        var event_top = event.pageY - $(document).scrollTop();
        var end_offet_left = offset.left + 20;
        var end_offet_top = offset.top + 60 - $(document).scrollTop();
        flyer.fly({
            start: {
                left: event_left - 60,
                top: event_top - 50
            },
            end: {
                left: end_offet_left,
                top: end_offet_top,
                width: 0,
                height: 0
            },
            autoPlay: true, //是否直接运动,默认true
            speed: 1.1, //越大越快,默认1.2
            vertex_Rtop: 100, //运动轨迹最高点top值,默认20
            onEnd: function () {
                flyer.remove();
            }
        });
    };
});