JS高仿抛物线加入购物车特效实现代码

本篇文章主要介绍了JS高仿抛物线加入购物车特效实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。

1. 简介

要想让你的购物车有种高大上的感觉，加入特效的功能是必不可少的。

2. 实现思路

设置一些简单的样式
模拟把它添加到购物车中，数量增加
从点击的位置开始动画，结束动画

3. 代码实现

CSS代码

咱们给它设置一些简单的样式，让它显得不是那么的太low

 .flyer { display: block; width: 50px; height: 50px; border-radius: 50px; position: fixed; margin-left: 50px; z-index: 9999; } .cart img{ width: 60px; height: 60px; padding: 5px 0 0 250px; } .cartBox span{ display: block; color: white; position: absolute; left: 282px; top: 226px; width: 25px; height: 25px; border-radius: 50%; text-align: center; line-height: 25px; background-color: red; }

HTML代码

简单的结构代码，当然，现在写的都很简单！

  ![](img/1.jpg-600) 
   ![](img/2.jpg-600) 0

简单样式

JS代码

那么，接下来就要让它动起来了，这里我们首先要引入两个第三方库的插件，然后在写JS代码让它动起来！

接下来就是见证奇迹的时刻了！

 $('.box').on('click', addCart); var num = 0; function addCart(event) { var offset = $('#end').offset(), flyer = $('![](img/1.jpg-600)'); flyer.fly({ start: { left: event.pageX, top: event.pageY }, end: { left: offset.left + 280, top: offset.top, width: 0, height: 0 } }); num++; $('.cartBox span').text(num); }

最终效果