加入购物车 动画效果插件 - 解决滚动时的问题
源码 : 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();
}
});
};
});