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