实现购物车抛物线小球

js引入:
https://link.jianshu.com/?t=http://www.zhangxinxu.com/study/201312/parabola.js

css部分:

#ball{
            width: 50px;
            height: 50px;
            background-color: black;
            border-radius: 50%;
            position: absolute;
            z-index: 99;
            display: none;
        }

//抛物线小球JS部分:

            function ballmove(oBtn){
                $("#ball").css({
                    display:"block",
                    left:$(oBtn).offset().left,
                    top:$(oBtn).offset().top,
                })

                var fly = document.getElementById('ball');//移动的元素
                var cart = document.getElementById('ball_target');//目标元素
                
                

                var parabola = funParabola(fly, cart,{
                    speed: 1000,  // 每帧移动的像素大小
                    curvature: 0.005,  // 曲率
                    complete:function(){
                        fly.style.display = 'none';
                    },
                    otherTransform:''
                }).init();

            }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容