类似加入购物车的抛物线效果

抛物线动画

因为临近过年，公司需要出一个年会抽奖的页面来，开奖号码，是需要一个抛物线的动画效果，上网查了一下发现了一个好用的js，jquery.fly.min.js，jquery.fly.min.js下载

这个插件是需要依赖jquery库的，所以一起引入，

 // 抛物线
                // var offset; //目标位置
                var starts = $('.num-item').offset(); //开始位置
                for (let i = 0; i <= 7; i++) {
                    setTimeout(() => {
                        var offset = $('.nums_item' + i).offset();
                        var flyer = $('<div class="num-item">1</div>');
                        flyer.fly({
                            start: {
                                left: starts.left,
                                top: starts.top
                            },
                            end: {
                                left: offset.left + 20,
                                top: offset.top + 20,
                                width: 0,
                                height: 0
                            },
                            onEnd: function() {
                                this.destory();
                            }

                        });
                    }, 1500 * i);

                }

start就是你需要触发的位置，end是你需要结束的位置，就和平常写一样，让后加入这段即可，我这个是从一个点出发，分别落在不同的位置