jQuery模仿天猫实现惊艳加盟购物车

加入购物车的惊艳效果堪比天猫和聚美优。本文介绍了一个加入购物车的插件jquery.fly.min.js。点击加入购物车，物品会以抛物线动画效果到达购物车。

演示图：

超文本标记语言

首先加载jQuery.js和jquery.fly.min.js插件。

script src=' http : jquery . js '/script script src=' http : jquery . fly . min . js '/script接下来，演示了四款产品，每款产品都有图片、价格、名称以及加入购物车的按钮。

div class=' democralfix ' div class=' per ' img src=' http : images/1 . jpg ' width=' 180 ' height=' 240 ' alt=' picture 2 '/H3 span 259.00/span//H3 div class=' title '采用弹簧皮革坡跟和大码单鞋的女鞋/div a href=' JavaScript 3360 void(0)；'Class='button orange addcart '添加到购物车/a/div class=' per ' img src=' http : images/2 . jpg ' width=' 180 ' height=' 240 ' alt=' picture 2 '/h3span 136.00/span/H3 div class=' title '韩国采购情侣棉袄和棉袄女式韩国羊羔毛大衣/div a href=' JavaScript 3360 void(0)；'Class='button orange addcart '添加到购物车/a/div class=' per ' img src=' http : images/3 . jpg ' width=' 180 ' height=' 240 ' alt=' picture 3 '/H3 span 728.00/span//H3 div class=' title '冬季运动爱好者'羽绒服马甲和男士薄马甲/div a href=' JavaScript 3360 void(0)；'class=' button orange addcart ' add to购物车/a/div class=' per ' img src=' http : images/4 . jpg ' width=' 180 ' height=' 240 ' alt=' picture 4 '/H3 span 119.00/span/H3 div class=' title ' original-urban simplicity，文艺，纯色，棉麻，新中式小立领/div a href=' JavaScript 3360 void(0)；Class='按钮橙色addcart '添加购物车/a /div /divjQuery

我们想要达到的效果是：点击“添加到购物车”按钮后，产品图片会变成一个缩小的球体，从按钮开始，以抛物线的形式飞向右侧的购物车。在飞出之前，我们需要获取当前产品的图片，然后调用fly插件。之后，抛物线轨迹由飞行插件完成。我们只需要定义起点和终点的左侧，并在结束后销毁之前的动画。

$(function(){ var offset=$(' # icon-cart '))。offset()；$('.add cart’)。click(function(event){ var img=$(this))。父项()。儿童(' img ')。attr(' src ')；//获取当前点击图片var flyer=$(' img class=' flyer-img ' src=' http : ' img ' ')的链接；//投掷物体flyer . fly({ start : { left : event . pagex，//投掷物体起点横坐标top3360event.pagey//throwing物体起点纵坐标}，end : { left : offset . left 10，//top: offset.top 10，//Top3360Offset .Top10，Onnd3360Function () {$ ('# TIP ')。显示()。动画({width:' 200PX'}，300)。淡出(500)；////成功加入购物车动画效果this . destruction()；//销毁抛出的对象)；});});上面的代码可以完成加入购物车的效果，是不是很棒？Fly插件官网：https://github.com/amibug/fly.另外，如果兼容IE10，需要添加以下js文件：

script src=' http : requestanimationframe . js '/script以上就是本文的全部内容，希望大家能够喜欢。