2022最新购物车动画效果

收藏

2022最新购物车动画效果，使用js搭配css完成加入购物车效果

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 50 积分

//首先需要获取到商品的图片，然后将获取到的图片复制一份； var i = 0; var inum = 0; if(localStorage.getItem("inum")!==null){ inum = localStorage.getItem("inum"); } $(".dnum").text(inum); $(".godadd").click(function(){ if (!$(this).find("a").hasClass("bg")) { i++; $(this).find("a").addClass("bg"); // 首先需要获取到商品的图片，然后将获取到的图片复制一份； var img = $(this).parent().find(".godpic").find("img"); var cimg = img.clone(); // 得到商品图片的top和left值，购物车的top和left值，这样才可以通过animate函数实现移动 var imgtop = img.offset().top; var imgleft = img.offset().left; var cartop = $("#godcar").offset().top; var carleft = $("#godcar").offset().left; // 编写animate函数，实现具体的效果； cimg.appendTo($("body")).css({ "position": "absolute", "opacity": "0.7", "top": imgtop, "left": imgleft }).animate({ "top": cartop, "left": carleft, "width": "40px", "height": "40px", "opacity": "0.3" }, 1000, function () { cimg.remove();//图片消失 $(".dnum").text(i);//购物车数量变化 localStorage.setItem("inum", i); }); } });