js抛物线

Posted 2020-07-09 记录下自己走过前端的坑~

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js抛物线相关的知识，希望对你有一定的参考价值。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .wrap {
            position: relative;
            width: 1000px;
            height: 550px;
            margin: 0 auto;
            border: 1px solid #ccc;
            margin-top: 50px;
        }
        #fall {
            width: 20px;
            font-size: 1px;
            height: 20px;
            background: #000;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
<input type="button" value="演示" onclick="demo()">;
<div class="wrap">
    <div id="fall">o</div>
</div>
<script>
    function demo() {
        var x, y, a,t;
        x=2;
        y=-2;
        a=0.0098;
        t=10;
        var f=document.getElementById(‘fall‘);
        var Vx=parseInt(x),
                Vy=parseInt(y),
                g=a,
                t=parseInt(t),
                h=0,l=0,Sx=0,Sy=0;
        var i=setInterval(function(){
            if(f){
                Sx+=Vx*t;
                l=Sx;
                Vy+=g*t;
                h+=Vy*t;
                f.style.left=l+‘px‘;
                f.style.top=h+‘px‘;
                if(h>500||l>900)clearInterval(i);
            }
        },t);
    }
//  demo(2,-2,0.0098,10);

</script>
</body>
</html>

以上是关于js抛物线的主要内容，如果未能解决你的问题，请参考以下文章

js抛物线动画

js抛物线

js加入购物车抛物线动画

Vue项目中用的Jquery.js和easing.js做的抛物线

js 抛物线随机颜色