Jquery实现加入购物车动画效果

在这里插入图片描述
点击加入购物车 该图片飞出购物车处并且数量显示加1
在这里插入图片描述
HTML+css:

html

  <div class="img-box">
    <ul>
    	<li>
    	  <img src="../img/f1.jpg" alt="">
          <button class="btn1">加入购物车</button>
          <button class="btn2">加入收藏</button>          
     	</li>
    	<li>
          <img src="../img/f2.jpg" alt="">
          <button class="btn1">加入购物车</button>
          <button class="btn2">加入收藏</button>
    	</li>
    </ul>
  </div>
  <div class="shop-box">
    <ul>
    	<li>
         <div class="con">购物车</div>
         <span id="btn1-add">0</span>
    	</li>
    	<li>
         <div class="con">我的收藏</div>
         <span id="btn2-add">0</span>
    	</li>
    </ul>
  </div>
</div>
<script src="jquery-3.3.1.min.js"></script>
<script src="imgFly.js"></script>
	<style>
  *{margin:0;padding: 0}
  ul{list-style: none;}
  body{
  		background: rgba(255,0,0,0.6);
  }
  .wapper{
  	width: 100%;
  	height: 700px;
  }
  .wapper .img-box ul{
  	width: 100%;
  	text-align: center;
  	margin-top: 50px;
  }
  .wapper .img-box ul li{
  	display: inline-block;
  	height: 300px;
  	width: 300px;
  	margin-left: 20px;
  }
  .wapper .img-box li img{
height:100%;
width:100%;
}
.wapper .img-box li button{
	width: 80px;
	height: 30px;
	color: #FFF;
	margin:20px;
	cursor: pointer;
	background: pink;
	font-weight:bold;
    border:none;
}
.shop-box{
	width:300px;
}
.shop-box ul li{
	width:100px;
	height: 50px;
	margin-left: 20px;
} 
</style>

JS文件
//用来计数点击加入次数
var totalBtn1=0,
totalBtn2=0;
//点击事件
function clickBtn(){
KaTeX parse error: Expected '}', got 'EOF' at end of input: …击的图片 var img=(this).parent().find(‘img’);
//获得到点击的btn按钮
var btn=$(this).attr(‘class’);
//克隆出一张要飞出来的图片
var flyImg=img.clone().css({‘opacity’:‘0.6’});
//将这张图片插入父级中
KaTeX parse error: Expected '}', got '#' at position 94: …er':'3px solid #̲fff', 'posit…(’#btn1-add’).offset().top;
b=KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲btn1-add').offs…(’#btn2-add’).offset().top+‘px’;
b=$(’#btn2-add’).offset().left+‘px’;
totalBtn2++;
}
flyImg.animate({
‘top’:t,
‘left’:b,
‘height’:0+‘px’,
‘width’: 0 + ‘px’,
},1500,function () {
flyImg.remove();
$(’#btn2-add’).html(totalBtn2);
$(’#btn1-add’).html(totalBtn1);
})
})
})
}
clickBtn();

©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值