加入购物车的动画效果

html

    
    
    
    


    
 
     

  

      
      加入购物车
      加入收藏夹
  
   

      
      加入购物车
      加入收藏夹
  
     
 
 
     

  

      
      
  
  

      
   
   购物车
   0
      
      我的购物车
  
  

      
      我的资产
  
  

      
      我的足迹
  
  

      
   
   0
      
  
  

      
      我要充值
  
  

      
      
  
     
 
    
    
    

js

(function(){
    let totalBtn1 = 0,
 totalBtn2 = 0;
    function clickBtn() {
 $('button').on('click',function () {
     let img = $(this).parent().find('img');
     let btn = $(this).attr('class');
     let flyImg = img.clone().css({
  'opacity':'0.6'
     });
     $('.wrapper').append(flyImg);
     flyImg.css({
  'z-index':999,
  'border':'3px solid #fff',
  'position': 'absolute',
  'height' : img.height() + 'px',
  'width' : img.width() + 'px',
  'top' : img.offset().top +'px',
  'left' : img.offset().left + 'px'
     })
     flyImg.animate({
  'width' : 50 + 'px',
  'height' : 50 + 'px',
  'border-radius' : 100 + '%'
     },function(){
  let t;
  if (btn == 'btn1'){
      t = $('#btn1-add').offset().top - 60 + 'px';
      totalBtn1 ++;
      if(totalBtn1>99){
   totalBtn1 = 99
      }
  }else if(btn = 'btn2'){
      t = $('#btn2-add').offset().top - 60 + 'px';
      totalBtn2 ++;
      if(totalBtn2>99){
   totalBtn2 = 99
      }
  }
  flyImg.animate({
      'top':t,
      'left':($(document).width()-$('.rightBox').width()) + 'px',
      'height':0 +'px',
      'width' :0+'px',
  },1500,function(){
      flyImg.remove();
      $('#btn2-add').html(totalBtn2);
      $('#btn1-add').html(totalBtn1);
  })
     });
 })
    }
    clickBtn();
})();

css

*{
    margin: 0;
    padding: 0;
    list-style: none;
}
.wrapper {
    width:100%;
    height:700px;
}
.wrapper .imgBox ul {
    width:100%;
    text-align:center;
    margin-top:50px;
}
.wrapper .imgBox li {
    display:inline-block;
    height:300px;
    width:300px;
    margin-left:20px;
}
.wrapper .imgBox li img {
    width:100%;
    height:100%;
}
.wrapper .imgBox button {
    margin-left:20px;
}
.rightBox {
    position:fixed;
    top:0;
    right:0;
    height:100%;
    width:42px;
    background-color:#444851;
}
.rightBox-ul {
    margin-top:100px;
}
.rightBox-ul li {
    position:relative;
}
.rightBox-ul li a {
    display:block;
    width: 40px;
    min-height:50px;
    text-decoration:none;
}
.fir a {
    background:url('../img/index.png') 0px 0px no-repeat;
}
.thir a {
    background:url('../img/index.png') 0px -200px no-repeat;
}
.four a {
    background:url('../img/index.png') 0px -240px no-repeat;
}
.six a {
    background:url('../img/index.png') 0px -314px no-repeat;
}
.seven {
    margin-top:100px;
}
.seven a {
    background:url('../img/index.png') 0px -442px no-repeat;
}
.sec i,
.fif i {
    display:block;
    height:40px;
    width: 40px;
    background:url('../img/index.png') 0px -60px no-repeat;
}
.sec .con {
    height:48px;
    width:16px;
    color:#fff;
    font-size:14px;
    margin:5px 0 0 12px;
}
.leftBox{
    width:92px;
    height:38px;
    background:#444851;
    position:absolute;
    left:-121px;
    top:10px;
    display:none;
    color:#fff;
    line-height: 38px;
    text-align:center;
    font-size:14px;
}
.sec span,
.fif span {
    display:block;
    height:21px;
    width:21px;
    border-radius:100%;
    background-color: #ed145b;
    color:#fff;
    margin:15px 0 0 10px;
    text-align:center;
    line-height:21px;
}
.fif i {
    background:url('../img/index.png') 0px -278px no-repeat;
}
.fif span {
    background-color:#f40;
    margin:5px 0 0 10px;
}

.fir-leftBox,
.sev-leftBox {
    height:185px;
    width:270px;
    border:1px solid #cecece;
    position:absolute;
    top:5px;
    left:-272px;
    display:none;
}
.fir-leftBox {
    background:url('../img/index-1.png') 0px 0px no-repeat;
}
.sev-leftBox {
    width:165px;
    left:-175px;
    background:url('../img/index-2.png') 0px 0px no-repeat;
}
.show {
    display:block;
}