让我先给你看效果图：

在购物网站中，添加购物车的功能是必不可少的功能。当用户在一些网站点击添加购物车按钮时，产品会从点击开始以抛物线动画相似度添加到购物车中。这个功能看起来非常耀眼，一定程度上提升了用户体验。下面描述基于jquery fly插件添加购物车的抛物线动画效果。

方便使用jquery.fly插件实现购物车添加抛物线动画的功能。

一、插件下载。

官方插件：https://github.com/amibug/fly.

其次，加载jQuery库文件和jquery.fly.min.js插件。

脚本src=' http : jquery . js '/脚本脚本src=' http : jquery . fly . min . js '/脚本iii。添加购物车动画的飞入效果示例。

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

div class=' container ' div class=' democrafix ' div class=' per ' img src=' http : images/1 . jpg ' width=' 180 ' height=' 240 ' alt=' picture 2 '/div class=' title ' AAA/diva href=' JavaScript 3333。Class='button orange addcart '加入购物车/a/div class=' per ' img src=' http : images/2 . jpg ' width=' 180 ' height=' 240 ' alt=' picture 2 '/div class=' title ' BBB/diva href=' JavaScript 3333。Class='button orange addcart '加入购物车/a/div/div/div class=' cart-sidebar ' div class=' cart ' I id=' icon-cart '/ispan购物车/span/div/divdiv id='tip '成功加入购物车！/div script $(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 . destroy()；//销毁抛出的对象)；});});脚本注释

IE10需要添加以下js:

脚本src=' http : requestanimationframe . js '/脚本上面提到的是为jquery fly插件实现添加购物车的抛物线动画效果。希望对大家有帮助！