前端利用jquery.fly实现购物车飞入效果

利用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();
	        }
	    });
	}

完。