js setInterval（定时器）实现方块的上下移动效果，

最新推荐文章于 2023-11-13 22:20:33 发布

内心的一片海

最新推荐文章于 2023-11-13 22:20:33 发布

阅读量387

点赞数

分类专栏： jsp 文章标签： javascript 动画前端

本文链接：https://blog.csdn.net/m0_52946104/article/details/127000823

版权

jsp 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!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;
            left: 0px;
            position: absolute;
        }

        #div3 {
            width: 100px;
            height: 100px;
            background-color: yellow;
            left: 0px;
            position: absolute;
            top: 200px;
        }
    </style>
    <script type="text/javascript">
        window.onload = function (ev) {
            //开启一个定时器
            var number = 0;

            var div1 = document.getElementById("div1");
            var div3 = document.getElementById("div3");
            var btn01 = document.getElementById("btn01");
            var btn02 = document.getElementById("btn02");
            var btn03 = document.getElementById("btn03");
            var btn04 = document.getElementById("btn04");
            //var number
            btn01.onclick = function (ev1) {
                move(div1,"left", 800, 10)
            }
            btn02.onclick = function (ev1) {
                move(div1,"left", 0, 10)
            }
            btn03.onclick = function (ev1) {
                move(div3,"left", 800, 11)
            }

            btn04.onclick=function (ev1) {

                move(div3,"width", 800, 11,function () {
                    alert("动画执行完毕了")
                })
            }
            /**
             * 参数
             * obj：要执行动画的对象
             * attr 要执行动画的样式 left top width height
             * target：执行动画的目标位置
             * speed：速度（正数向右，负数向左）
             * callback 在动画执行完毕后执行
             *
             * */
            function move(obj, attr,target, speed,callback) {

                clearInterval(obj.number);

                var current = parseInt(getStyle(obj, attr));
                //判断速度的正负
                //0到800 speed速度为正值
                //800到0 speed为负值
                if (current > target) {

                    speed = -speed;
                }
                obj.number = setInterval(function () {
                    //获取元素所在位置
                    var newValue = parseInt(getStyle(obj, attr));

                    newValue += speed;
                    if ((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) {

                        newValue = target;
                    }
                    obj.style[attr] = newValue + "px";
                    //当元素移动到0px时，使其停止执行动画
                    if (newValue == target) {
                        //达到目标关闭定时器
                        clearInterval(obj.number);
                        //有就执行回调函数，灭有就不执行
                        callback&&callback();
                    }
                }, 59)
            }


            /***
             * 定义一个函数，用来获取指定的元素的当前的样式
             *
             * @param obj 要获取的元素的样式
             * @param name 要获取元素的样式名
             * @returns {string|*}
             */
            function getStyle(obj, name) {
                //正常的浏览器的方式，具有getComputedStyle()方法
                if (window.getComputedStyle) {
                    return getComputedStyle(obj, null)[name];
                } else {
                    //ie8的方式，没有getComputedStyle()方法
                    return obj.getComputedStyle[name]
                }

            }

        }
    </script>
</head>
<body>
<button id="btn01">点击按钮以后box向右移动</button>
<button id="btn02">点击按钮以后box向左移动</button>
<button id="btn03">点击按钮以后box2向右移动</button>
<button id="btn04">测试按钮</button>
<br>
<br>
<div id="div1"></div>

<div id="div2" style="width: 0px;height: 800px ;border-left: 1px black solid;position: absolute;left: 800px "></div>
<div id="div3"></div>

</body>
</html>