jQuery imitiert Tmall, um atemberaubende Ergebnisse zu erzielen

Der supercoole Add-to-Cart-Effekt ist vergleichbar mit dem Add-to-Cart-Effekt von Tmall und Jumei Youpin. In diesem Artikel wird jquery.fly.min.js vorgestellt, ein Plug-In zum Hinzufügen zum Warenkorb. Klicken Sie zum Hinzufügen zum Warenkorb. Die Artikel werden mit einem parabolischen Animationseffekt im Warenkorb angezeigt.

Demobild:

HTML

Laden Sie zuerst die Plugins jQuery.js und jquery.fly.min.js.

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

Als nächstes erstellen Sie 4 Produkte zur Demonstration. Jedes Produkt verfügt über Informationen wie Bilder, Preise, Namen und Schaltflächen zum Hinzufügen zum Warenkorb.

<div class="demo clearfix"> 
  <div class="per"> 
  <img src="/static/imghw/default1.png"  data-src="images/1.jpg"  class="lazy"    style="max-width:90%"  style="max-width:90%" alt="jQuery imitiert Tmall, um atemberaubende Ergebnisse zu erzielen" /> 
  <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/imghw/default1.png"  data-src="images/2.jpg"  class="lazy"    style="max-width:90%"  style="max-width:90%" alt="jQuery imitiert Tmall, um atemberaubende Ergebnisse zu erzielen" /> 
  <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/imghw/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/imghw/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

Der Effekt, den wir erzielen möchten, ist: Wenn Sie auf die Schaltfläche „In den Warenkorb hinzufügen“ klicken, verwandelt sich das Produktbild in eine schrumpfende Kugel, die ausgehend von der Schaltfläche in einer Parabel nach rechts zum Einkaufszentrum fliegt rechts im Auto. Bevor wir losfliegen, müssen wir uns ein Bild vom aktuellen Produkt machen und dann das Flug-Plug-In aufrufen. Die nachfolgenden parabolischen Flugbahnen werden durch das Flug-Plug-In vervollständigt. Wir müssen nur die linke Seite des Startpunkts definieren Endpunkt und die Animation vor der Zerstörung nach dem Ende.

$(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/imghw/default1.png"  data-src="requestAnimationFrame.js"  + img + '" alt="jQuery imitiert Tmall, um atemberaubende Ergebnisse zu erzielen" >'); //抛物体对象 
    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(); //销毁抛物体 
      } 
    }); 
  }); 
});

Der obige Code kann den Effekt des Hinzufügens zum Warenkorb vervollständigen, ist das nicht großartig? Offizielle Website des Fly-Plugins: https://github.com/amibug/fly Darüber hinaus ist es mit IE10 und niedriger kompatibel. Sie müssen die folgende js-Datei hinzufügen:

<script></script>

Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, er gefällt euch allen