jQuery implementiert den Animationseffekt des Hinzufügens zum Warenkorb_jquery

HTML

Laden Sie zunächst die jQuery-Bibliotheksdatei und das Plug-in jquery.fly.min.js.

Code kopieren Der Code lautet wie folgt:

Als nächstes legen wir die HTML-Struktur der Produktinformationen fest. In diesem Beispiel ordnen wir vier Produkte nebeneinander an. Jede Produktbox enthält Informationen wie Produktbilder, Preise, Namen und Schaltflächen zum Hinzufügen zum Warenkorb.

Code kopieren Der Code lautet wie folgt:

￥3499,00

LG 49LF5400-CA 49-Zoll-IPS-Hartbildschirm mit sattem Kupfermünzendesign

Zum Warenkorb hinzufügen

￥3799,00

Hisense/Hisense LED50T1A Hisense TV Offizieller Flagship-Store

Zum Warenkorb hinzufügen

￥￥3999,00

Skyworth/Skyworth 50E8EUS 8-Core 4Kj ultraklarer, cooler, offener LCD-Fernseher

Zum Warenkorb hinzufügen

￥6969,00

LeTV Letv X60S 4-Core 1080P HD 3D Android Smart Super TV

Zum Warenkorb hinzufügen

Dann müssen wir auch einen Warenkorb und Eingabeaufforderungsinformationen auf der rechten Seite der Seite hinzufügen.





Code kopieren


Der Code lautet wie folgt:

                                                                                                                                                                                                                                            

Erfolgreich zum Warenkorb hinzugefügt!

CSS

Wir verwenden CSS, um die Produkte zunächst anzuordnen und zu verschönern und dann den Stil des Warenkorbs auf der rechten Seite festzulegen. Weitere Informationen finden Sie im Code:

Code kopieren

Der Code lautet wie folgt:

.box{float:left; Breite: 198 Pixel; Höhe:320px; margin-left:5px; border:1px solid #e0e0e0; text-align:center}
.box p{line-height:20px; Polsterung: 4px 4px 10px 4px; text-align:left}
.box:hover{border:1px solid #f90}
.box h4{line-height:32px; Schriftgröße:14px; Farbe:#f30;Schriftstärke:500}
.box h4 span{font-size:20px}
.u-flyer{display: block;width: 50px;height: 50px;border-radius: 50px;position: fixiert;z-index: 9999;}
.m-sidebar{position: Fixed;top: 0;right: 0;background: #000;z-index: 2000;width: 35px;height: 100%;font-size: 12px;color: #fff;}
.cart{color: #fff;text-align:center;line-height: 20px;padding: 200px 0 0 0px;}
.cart span{display:block;width:20px;margin:0 auto;}
.cart i{width:35px;height:35px;display:block; Hintergrund:url(car.png) no-repeat;}
#msg{position:fixed; oben:300px; rechts:35px; Z-Index:10000; Breite: 1px; Höhe: 52px; Zeilenhöhe:52px; Schriftgröße:20px; text-align:center; Farbe:#fff; Hintergrund:#360; display:none}

jQuery

我们要实现的效果是, 当用户点击“加入购物车“按钮时, 当前商品图片会变成一个缩小的圆球,以按钮为起点,向右侧以抛物线的形式飞出,最后落入页面右侧的购物车里,并提示操作成功.在飞出之前,我们要获取当前商品的图片,然后调用fly插件, 之后的抛物线轨迹都是由fly插件完成, 我们只需定义起点和终点等参数即可.

复制代码 代码如下:

<script> <br /> $(function() { <br />     var offset = $("#end").offset(); <br />     $(".addcar").click(function(event){ <br />         var addcar = $(this); <br />         var img = addcar.parent().find('img').attr('src'); <br />         var flyer = $('<img class="u-flyer lazy" src="/static/imghwm/default1.png" data-src="requestAnimationFrame.js" img '" alt="jQuery implementiert den Animationseffekt des Hinzufügens zum Warenkorb_jquery" >'); <br />         flyer.fly({ <br />             Start: { <br />                 links: event.pageX, //开始位置（必填）#fly元素会被设置成Position: behoben <br />                 oben: event.pageY //开始位置（必填） <br />             }, <br />             Ende: { <br />                 left: offset.left 10, //结束位置（必填） <br />                 top: offset.top 10, //结束位置（必填） <br />                 Breite: 0, //结束时宽度 <br />                 Höhe: 0 //结束时高度 <br />             }, <br />             onEnd: function(){ //结束回调 <br />                 $("#msg").show().animate({width: '250px'}, 200).fadeOut(1000); //提示信息 <br />                 addcar.css("cursor","default").removeClass('orange').unbind('click'); <br />                 this.destory(); //移除dom <br />             } <br />         }); <br />     }); <br /> }); <br /> </script>

复制上面的代码，保存并运行即可看到效果，Fly插件的项目官网地址是：https://github.com/amibug/fly值得一提的是，IE10以下需要添加以下js:

<script></script>

以上就是本文的全部内容了，希望大家能够喜欢