抛物线运动JavaScript实现

柔光的暖阳◎ 2022-05-27 12:29 227阅读 0赞

**html代码**

**css代码**

* {
                margin: 0;
                padding: 0
            }
    
            #goods {
                width: 50px;
                height: 50px;
                background: red;
                position: absolute;
                right: 0;
                top: 200px;
            }
    
            div {
                width: 10px;
                height: 10px;
                background: #000;
                position: absolute;
            }

**JS代码**

/*
            y = a*x*x+b*x;
            y = -0.001*X*X+b*x
         */
        var goods = document.getElementById("goods");
        var iw = document.documentElement.clientWidth - goods.offsetWidth;
        document.onclick = function (e) {
            var e = e || event;
            var div = document.createElement("div");
            div.style.left = e.clientX + 'px';
            div.style.top = e.clientY + 'px';
            document.body.appendChild(div);
    
            /*
                如何求出 x  y  b
                原点真实坐标 (iw-50,200)
                原点虚拟坐标 (0,0)
             */
    
            var x = e.clientX - iw;
            var y = 200 - e.clientY;
            var b = (y + 0.001 * x * x) / x;
    
            div.timer = setInterval(function () {
                x += 5;
                y = -0.001 * x * x + b * x;
                if (x >= 0) {
                    clearInterval(div.timer)
                }
                div.style.left = iw + x + 'px';
                div.style.top = 200 - y + 'px';
            }, 30)
        }