利用jquery.fly实现购物车飞入效果
学习笔记:在商城开发项目中,为了使商品加入购物车时更有用户体验,我们来模仿淘宝实现商品飞入购物车效果,以下是我总结的一个方法。
参考网址:github
以上网址有js文件,下载即可
一、载入文件
<script src="src/jquery-3.3.1.min.js"></script>
<script src="src/fly.min.js"></script>
//IE10以下,引入src/requestAnimationFrame.js
<script src="src/requestAnimationFrame.js"></script>
二、js代码
// 点击购物车按钮
$(document).on('click','.goods-details__cart',function () {
var mun = $(this).siblings().children('.munber'); //获取商品数字
mun.text(parseInt(mun.text())+1); //数量 + 1
var totalNum = parseInt($('.totalNum').text()); //获取购物车总数字
totalNum++; //购物车总数量+1
$('.totalNum').text(totalNum); //更新渲染
fly();
});
//飞入购物车动画
function fly() {
var globalLeft = $('.goods-details__cart').offset().left;
var globalTop = $('.goods-details__cart').offset().top - $(document).scrollTop() + 1000;
var img = $(this).parent().siblings().children('img').attr('src'); //获取当前点击图片链接
var flyer = $('<img class="flyer-img" src="' + img + '">'); //抛物体对象
layer.msg('成功加入购物车!');
flyer.fly({
start: {
left: event.pageX,
top: event.pageY - $(document).scrollTop()
},
end: {
top: globalTop + 100,
left: globalLeft - 130,
// width: 0,
// height: 0,
},
onEnd: function () {
$(flyer).remove();
}
});
}
完。