jQuery meniru Tmall untuk mencapai penambahan yang menakjubkan pada shopping cart_jquery

Kesan tambah ke troli yang sangat hebat setanding dengan kesan tambah ke troli Tmall dan Jumei Youpin. Artikel ini memperkenalkan jquery.fly.min.js, pemalam untuk menambah troli beli-belah Klik untuk menambah troli beli-belah, dan item akan tiba di troli beli-belah dengan kesan animasi parabola.

Gambar demo:

HTML

Muat pertama pemalam jQuery.js dan jquery.fly.min.js.

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

Seterusnya, buat 4 produk untuk demonstrasi Setiap produk mempunyai maklumat seperti gambar, harga, nama, dan butang tambah ke troli.

<div class="demo clearfix"> 
  <div class="per"> 
  <img src="/static/imghwm/default1.png"  data-src="images/1.jpg"  class="lazy"    style="max-width:90%"  style="max-width:90%" alt="jQuery meniru Tmall untuk mencapai penambahan yang menakjubkan pada shopping cart_jquery" /> 
  <h3 id="yen-span-span">&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="/static/imghwm/default1.png"  data-src="images/2.jpg"  class="lazy"    style="max-width:90%"  style="max-width:90%" alt="jQuery meniru Tmall untuk mencapai penambahan yang menakjubkan pada shopping cart_jquery" /> 
  <h3 id="yen-span-span">&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="/static/imghwm/default1.png"  data-src="images/3.jpg"  class="lazy"    style="max-width:90%"  style="max-width:90%" alt="图片三" /> 
  <h3 id="yen-span-yen-span">&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="/static/imghwm/default1.png"  data-src="images/4.jpg"  class="lazy"    style="max-width:90%"  style="max-width:90%" alt="图片四" /> 
  <h3 id="yen-span-span">&yen;<span>119.00</span></h3> 
  <div class="title">原创-城市简约文艺纯色棉麻新中式小立领</div> 
  <a href="javascript:void(0);" class="button orange addcart">加入购物车</a> 
  </div> 
</div>

jQuery

Kesan yang ingin kami capai ialah: apabila butang "Tambah ke Troli Beli-belah" diklik, imej produk akan bertukar menjadi bola mengecut, bermula dari butang, terbang keluar dalam parabola ke kanan ke pusat beli-belah di sebelah kanan dalam kereta. Sebelum terbang keluar, kita perlu mendapatkan gambar produk semasa, dan kemudian memanggil palam lalat Trajektori parabola seterusnya diselesaikan oleh palam lalat Kita hanya perlu menentukan bahagian kiri titik permulaan dan titik akhir dan animasi sebelum pemusnahan selepas tamat.

$(function() { 
  var offset = $("#icon-cart").offset(); 
  $(".addcart").click(function(event) { 
    var img = $(this).parent().children('img').attr('src'); //获取当前点击图片链接 
    var flyer = $('<img  class="flyer-img lazy"  src="/static/imghwm/default1.png"  data-src="requestAnimationFrame.js"  + img + '" alt="jQuery meniru Tmall untuk mencapai penambahan yang menakjubkan pada 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(); //销毁抛物体 
      } 
    }); 
  }); 
});

Kod di atas boleh melengkapkan kesan penambahan pada troli beli-belah, bukankah ia hebat! Laman web rasmi pemalam Fly: https://github.com/amibug/fly Selain itu, ia serasi dengan IE10 dan ke bawah Anda perlu menambah fail js berikut:

<script></script>

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya