JS高仿抛物线加入购物车特效

0.前言

timg.jpg

一滴水可以折射太阳的光辉，一朵花可以点缀春天的美丽，一颗螺丝钉可以带动整个机器的运转，尽管世界繁华万千，但你依然可以发现，平凡依然很美丽，高仿也狠6！

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>

简单样式

1.jpg

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);
        }

最终效果

GIF.gif

是不是很简单，有没有学会啊！

4. 结束语

以上就是全部内容了，希望我写东西对大家的学习或者工作能带来一定的帮助，同时也希望读者老爷们的支持，如果你喜欢，点赞分享吧！！！