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

2019-11-19 17:29:21

字体：大中小

来源：转载

供稿：网友

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代码

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

<div class="box">     ![](img/1.jpg)  </div>  <div class="cartBox">    <div class="cart">      <i id="end"></i>        ![](img/2.jpg)        <span>0</span>    </div>  </div>

简单样式

JS代码

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

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

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

$('.box').on('click', addCart);    var num = 0;    function addCart(event) {      var offset = $('#end').offset(), flyer = $('![](img/1.jpg)');      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);    }

最终效果