添加商品到购物车动画
1、库文件引入
jquery.fly.min.js是基于jquery的库
<script src="js/libs/angular-ui-router.min.js"></script>
<script src="js/libs/jquery.fly.min.js"></script>
2、使用:需要三个目标,目标对象、fly对象、起点对象
var shoppingCart = $('#shoppingCart').offset(); // 目标对象 飞到的终点的坐标
var itemCartObj = $("#shoppingCartBtn").offset(); // 起点对象 获取起点坐标
var flyHtml = "<div id='flyItem' class='fly-item'><img src='"+ xxxxxx +"'></div>"; // 自定义fly对象
var flyer = $(flyHtml);
flyer.fly({
start: {
left: itemCartObj .left,
top: itemCartObj .top
},
end: {
top: shoppingCart.top,
left: shoppingCart.left,
width: 0,
height: 0
},
onEnd: function(){
flyer.remove(); // 结束移除飞行对象
}
})