JavaScript小球运动反弹简单案例 

<!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>
        * {
            margin:0;
            padding:0;
        }
        #ball {
            width:50px;
            height:50px;
            background-color: red;
            border-radius: 50%;
            position:absolute;
            left:0;
            top:200px;
        }
    </style>
</head>

<body>
    <input type="button" value="开始" id="btn">
    <div id="ball"></div>
    <script>
        // 获取dom对象
        var $btn = document.querySelector('#btn');
        var $ball = document.querySelector('#ball');
        //  设置速度
        var topSpeed = 5;
        var leftSpeed = 5;
        //  点击按钮 小球开始运动
        $btn.onclick = function () {
            //  设置定时器
            setInterval(function () {
                //  获取小球最大移动的宽,高
                var maxTop = document.documentElement.clientHeight - $ball.offsetHeight;
                var maxLeft = document.documentElement.clientWidth - $ball.offsetWidth;
                //  小球超出可视区让其速度取反
                if ($ball.offsetTop < 0 || $ball.offsetTop > maxTop) {
                    topSpeed *= -1;
                } else if ($ball.offsetLeft < 0 || $ball.offsetLeft > maxLeft) {
                    leftSpeed *= -1;
                }
                //  通过改变小球的left,top属性使其运动
                $ball.style.left = $ball.offsetLeft + leftSpeed + "px";
                $ball.style.top = $ball.offsetTop - topSpeed + "px";
            }, 20)
        }
    </script>
</body>

</html>

右边没录好

posted on 2019-03-14 15:37  友人H  阅读(344)  评论(0)  编辑  收藏  举报

导航