div重复移动

最新推荐文章于 2022-05-07 15:42:55 发布

hhw199112

最新推荐文章于 2022-05-07 15:42:55 发布

阅读量229

点赞数

分类专栏：前端样式 html

本文链接：https://blog.csdn.net/hhw199112/article/details/79274730

版权

html 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

前端样式

3 篇文章 0 订阅

订阅专栏

<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>

hhw199112

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
div重复移动

上下左右移动 #div1 { position: absolute; border: 1px solid black; width: 50px; height: 50px; left: 0px; top: 100p
复制链接

扫一扫

专栏目录