16-js-缓冲运动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #div1 {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            left: 600px;
            top: 50px;
        }

        #div2 {
            width: 1px;
            height: 300px;
            position: absolute;
            left: 300px;
            top: 0;
            background-color: black;
        }
    </style>
    <script>
        function startMove() {
            var oDiv = document.getElementById(\'div1\');
            setInterval(function () {

                var speed = (300 - oDiv.offsetLeft) / 10;
                //speed = Math.ceil(speed);//向上取整
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);//判断是否大于0， 向上or向下取整；
                oDiv.style.left = oDiv.offsetLeft + speed + \'px\';
                document.title = oDiv.offsetLeft + \',\' + speed;
            }, 30);
        }
    </script>
</head>
<body>
<input type="button" value="开始运动" onclick="startMove()">
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
来自为知笔记(Wiz)
巴特西

16-js-缓冲运动

最新文章

热门文章
