重力回弹抛物线 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box{width:800px;height: 500px;border: solid 1px black;margin: 20px auto;position: relative;}
        .box div{width:100px;height:100px;background: red;border-radius: 50%;position: absolute;left: 0;top:0;}
    </style>
</head>
<body>
    <div class="box">
        <div></div>
    </div>
</body>
<script>
    var div = document.querySelector(".box div");

    // 计时器
    var t;
    // 底部目标
    var target = 400;
    // 垂直步长
    var speed = 2;

    // 水平步长
    var speedL = 20;
    // 右边的目标
    var targetR = 700;

    document.onclick = function(){
        clearInterval(t);
        t = setInterval(() => {
            // 重力加速
            speed++;//负的speed++会变成正的然后top越来越大最后执行if中语句。直接结束了

            // 是否到底
            if(target - div.offsetTop < speed){
                div.style.top = target + "px";//下一次定时器执行时speed已经变成负的了，target - div.offsetTop不小于speed，执行else；
                // 步长取反，实现回弹
                speed = -speed * 0.9;
                // 步长小于1，衰减的下限，可以停止计时器了
                if(Math.abs(speed) < 1){
                    clearInterval(t)
                }
            }else{
                div.style.top = div.offsetTop + speed + "px";
            }
        console.log(div.style.top)

            // 右边目标判断
            if(targetR - div.offsetLeft < speedL){
                div.style.left = targetR + "px"
                // 步长取反，实现回弹
                speedL = -speedL;
                    // 当前案例，水平的移动应根据垂直是否停止而决定
            }else if(Math.abs(speed) >= 1){
                div.style.left = div.offsetLeft + speedL/2 + "px";
            }
            
            // 左边步长判断
            if(div.offsetLeft < 0){
                div.style.left = 0;
                // 步长取反，实现回弹
                speedL = -speedL;
                    // 当前案例，水平的移动应根据垂直是否停止而决定
            }else if(Math.abs(speed) >= 1){//上下没听才能继续走
                div.style.left = div.offsetLeft + speedL/2 + "px";
            }
            // console.log(speed);
        }, 30);
    }
</script>
</html>

 

posted @ 2019-09-04 22:37  菜鸟小何  阅读(298)  评论(0)  编辑  收藏  举报