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

抛物线动画

因为临近过年,公司需要出一个年会抽奖的页面来,开奖号码,是需要一个抛物线的动画效果,上网查了一下发现了一个好用的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是你需要结束的位置,就和平常写一样,让后加入这段即可,我这个是从一个点出发,分别落在不同的位置

发布了14 篇原创文章 · 获赞 0 · 访问量 1893
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 数字20 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览