div重复移动

<html>
<head>
    <title>上下左右移动</title>
    <style>
        #div1 {
            position: absolute;
            border: 1px solid black;
            width: 50px;
            height: 50px;
            left: 0px;
            top: 100px;
        }


        #div2 {
            position: absolute;
            border: 1px solid black;
            width: 50px;
            height: 50px;
            right: 0px;
            top: 100px;
        }


        #div3 {
            position: absolute;
            border:  solid 1px black;
            width: 50px;
            height: 50px;
            left: 20px;
            bottom:0px;
        }


        #div4 {
            position: absolute;
            border:  solid 1px black;
            width: 50px;
            height: 50px;
            right: 20px;
            top: 0px;
        }
    </style>
    <script>
        var timer1 = null;


        function moveItRight(val) {
            var el = document.getElementById("div1");
            if (parseInt(el.style.left) > (val))
                el.style.left = 0;
            el.style.left = parseInt(el.style.left) + 2 + 'px';
            timer1 = setTimeout(moveItRight, 25, 200);   // 在指定的毫秒数后调用函数
        }


        function moveItLeft(val) {
            var el = document.getElementById("div2");
            if (parseInt(el.style.right) > (val))
                el.style.right = 0;
            el.style.right = parseInt(el.style.right) + 2 + 'px';
            timer1 = setTimeout(moveItLeft, 25, 200);   // 在指定的毫秒数后调用函数
        }


        function moveItUp(val) {
            var el = document.getElementById("div3");
            if (parseInt(el.style.bottom) > (val))
                el.style.bottom = 0;
            el.style.bottom = parseInt(el.style.bottom) + 2 + 'px';
            timer1 = setTimeout(moveItUp, 25, 200);   // 在指定的毫秒数后调用函数
        }


        function moveItDown(val) {
            var el = document.getElementById("div4");
            if (parseInt(el.style.top) > (val))
                el.style.top = 0;
            el.style.top = parseInt(el.style.top) + 2 + 'px';
            timer1 = setTimeout(moveItDown, 25, 200);   // 在指定的毫秒数后调用函数
        }




        window.onload = function () {


            document.getElementById("div1").style.left = 0;
            moveItRight(200);
            document.getElementById("div2").style.right = 0;
            moveItLeft(200);
            document.getElementById("div3").style.bottom = 0;
            moveItUp(200);
            document.getElementById("div4").style.top = 0;
            moveItDown(200);
        }
    </script>
</head>
<body>
    <div id="div1" style="top:323;bottom"> Move left! </div>


    <div id="div2"> Move right! </div>




    <div id="div3">Move up!</div>


    <div id="div4">Move down!</div>
</body>
</html>
猜你喜欢
