jQuery imitates Tmall to achieve stunning add to shopping cart

jQuery imitates Tmall to achieve stunning add to shopping cart_jquery

WBOY

Release： 2016-05-16 16:01:23

Original

1289 people have browsed it

The super cool add-to-cart effect is comparable to the add-to-cart effect of Tmall and Jumei Youpin. This article introduces jquery.fly.min.js, a plug-in for adding to the shopping cart. Click to add to the shopping cart, and the items will arrive in the shopping cart with a parabolic animation effect.

Demo picture:

HTML

First load jQuery.js and jquery.fly.min.js plugins.

<script src="jquery.js"></script> 
<script src="jquery.fly.min.js"></script>

Copy after login

Next, make 4 products for demonstration. Each product has information such as pictures, prices, names, and add-to-cart buttons.

<div class="demo clearfix"> 
  <div class="per"> 
  <img src="images/1.jpg"    style="max-width:90%"  style="max-width:90%" alt="jQuery imitates Tmall to achieve stunning add to shopping cart_jquery" /> 
  <h3>&yen;<span>259.00</span></h3> 
  <div class="title">春款真皮坡跟大码单鞋内增高女士鞋子</div> 
  <a href="javascript:void(0);" class="button orange addcart">加入购物车</a> 
  </div> 
  <div class="per"> 
  <img src="images/2.jpg"    style="max-width:90%"  style="max-width:90%" alt="jQuery imitates Tmall to achieve stunning add to shopping cart_jquery" /> 
  <h3>&yen;<span>136.00</span></h3> 
  <div class="title">韩国代购情侣棉衣棉服女款韩版羊羔毛大衣</div> 
  <a href="javascript:void(0);" class="button orange addcart">加入购物车</a> 
  </div> 
  <div class="per"> 
  <img src="images/3.jpg"    style="max-width:90%"  style="max-width:90%" alt="图片三" /> 
  <h3>&yen;<span>&yen;728.00</span></h3> 
  <div class="title">冬季运动情侣羽绒棉马甲男士薄马甲</div> 
  <a href="javascript:void(0);" class="button orange addcart">加入购物车</a> 
  </div> 
  <div class="per"> 
  <img src="images/4.jpg"    style="max-width:90%"  style="max-width:90%" alt="图片四" /> 
  <h3>&yen;<span>119.00</span></h3> 
  <div class="title">原创-城市简约文艺纯色棉麻新中式小立领</div> 
  <a href="javascript:void(0);" class="button orange addcart">加入购物车</a> 
  </div> 
</div>

Copy after login

jQuery

The effect we want to achieve is: when the "Add to Shopping Cart" button is clicked, the product image will turn into a shrinking ball, starting from the button, flying out in a parabola to the right to the shopping center on the right. in the car. Before flying out, we need to get the picture of the current product, and then call the fly plug-in. The subsequent parabolic trajectories are completed by the fly plug-in. We only need to define the left side of the starting point and end point and the animation before destruction after the end.

$(function() { 
  var offset = $("#icon-cart").offset(); 
  $(".addcart").click(function(event) { 
    var img = $(this).parent().children('img').attr('src'); //获取当前点击图片链接 
    var flyer = $('<img  class="flyer-img" src="' + img + '" alt="jQuery imitates Tmall to achieve stunning add to shopping cart_jquery" >'); //抛物体对象 
    flyer.fly({ 
      start: { 
        left: event.pageX,//抛物体起点横坐标 
        top: event.pageY //抛物体起点纵坐标 
      }, 
      end: { 
        left: offset.left + 10,//抛物体终点横坐标 
        top: offset.top + 10, //抛物体终点纵坐标 
      }, 
      onEnd: function() { 
        $("#tip").show().animate({width: '200px'},300).fadeOut(500);////成功加入购物车动画效果 
        this.destory(); //销毁抛物体 
      } 
    }); 
  }); 
});

Copy after login

The above code can complete the effect of adding to the shopping cart, isn’t it great! Fly plug-in official website: https://github.com/amibug/fly. In addition, it is compatible with IE10 and below. You need to add the following js file:

<script src="requestAnimationFrame.js"></script>

Copy after login

The above is the entire content of this article, I hope you all like it