蹦蹦球效果

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>蹦蹦球</title>
        <style>
            .ball {
                border-radius: 50%;
                position: absolute;
            }
        </style>
    </head>

    <body>
        <div id="ball" class="ball"></div>
        <script>
            var ball = document.getElementById("ball");
            var a = {
                x: 100,
                y: 50,
                r: 25,
                w: 4,
                h: 5,
                g: 2,
                color: "blue"
            }
            ball.style.left = a.x + "px"; //初始位置
            ball.style.top = a.y + "px";
            ball.style.width = a.r * 2 + "px"; //球的参数
            ball.style.height = a.r * 2 + "px";
            ball.style.background = a.color; //颜色
            var time = setInterval(function() {
                a.x += a.w; //移动距离
                a.y += a.h;
                a.h += a.g; //掉落加速
                ball.style.top = a.y + "px";
                ball.style.left = a.x + "px";
                if (a.y > 500) { //漂移+回弹
                    a.h = -a.h * 0.8;
                }
            }, 50);
        </script>
    </body>

</html>

posted @ 2017-05-17 09:48  暮歌、  阅读(167)  评论(0)    收藏  举报