js定时器案例3

最新推荐文章于 2024-08-18 10:54:05 发布

喵俺第一专栏

最新推荐文章于 2024-08-18 10:54:05 发布

阅读量701

点赞数

分类专栏： # Html+css+js项目

本文链接：https://blog.csdn.net/dengfengling999/article/details/122766699

版权

JavaScript DOM 动画效果动态移动回调函数

关键词由CSDN通过智能技术生成

Html+css+js项目专栏收录该内容

31 篇文章 2 订阅

订阅专栏

增加了几个新的按钮，点击按钮box2向右移动，测试按钮

通过修改定义函数move，添加参数

可以自定义进行div的移动，和变化

attr：要执行动画的样式,比如left top width height：

//move(box2, 10, 800, "width");//box2宽度向右边长

//move(box2, 10, 800, "top");//box2向下移动

//move(box2, 10, 800, "height");//box2向下边长

详细代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #box1 {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
        }

        #box2 {
            width: 100px;
            height: 100px;
            background-color: yellow;
            position: absolute;
            top: 200px;
        }
    </style>
    <script>
        window.onload = function () {
            //获取box1,btn01
            var box1 = document.getElementById("box1");
            var btn01 = document.getElementById("btn01");
            //获取btn02
            var btn02 = document.getElementById("btn02");
            //定义一个变量
            var time;

            //点击按钮box1向右移动
            btn01.onclick = function () {
                move(box1, 10, 800, "left")

            };
            //点击按钮box1向左移动
            btn02.onclick = function () {
                move(box1, 10, 0, "left")//speed不用考虑正负值
            };

            //获取btn03
            var btn03 = document.getElementById("btn03");
            btn03.onclick = function () {
                move(box2, 10, 800, "left");
            };
            //获取btn04，测试按钮
            var btn04 = document.getElementById("btn04");
            btn04.onclick = function () {
                //move(box2, 10, 800, "width");//box2宽度向右边长
                //move(box2, 10, 800, "top");//box2向下移动
                //move(box2, 10, 800, "height");//box2向下边长
                move(box2, 10, 800, "width", function () {
                    //通过回调函数，box2宽度先向右宽度边长，然后高度向下变高，在向上移动，在向左宽度缩小
                    move(box2, 10, 400, "height", function () {
                        move(box2, 10, 0, "top", function () {
                            move(box2, 10, 100, "width", function () { });
                        });
                    });
                });
            };


        };
        /*
          定义一个函数，用来获取指定元素的当前的样式
          参数： obj：要获取样式的元素
                name：要获取的样式名   
        */
        function getStyle(obj, name) {
            if (window.getComputedStyle) {//正常浏览器有getComputedStyle这个方法，ie8以上有
                return getComputedStyle(obj, null)[name];//正常浏览器
            } else {
                return obj.currentStyle[name];//IE浏览器
            }

        }
        //创建一个可以简单执行动画的函数，当在调用的时候就不用像第一个（点击按钮box1向右移动）一样写那么多代码
        /*
          参数：
            obj:要执行动画的对象
            speed：要传进来的速度(正值向右移动，负值向左移动)
            target：执行动画的目标位置
            attr：要执行动画的样式,比如left top width height
            callback：回调函数，这个函数会在动画执行完毕以后执行
        */
        function move(obj, speed, target, attr, callback) {
            //关闭上一个定时器
            clearInterval(obj.time);

            //获取元素当前的位置
            var current = parseInt(getStyle(obj, attr));

            //判断速度正负值0-800speed为正，800-0speed为负
            if (current > target) {
                //此时速度为负值
                speed = -speed;
            }

            //开启一个定时器
            //向执行动画的对象中添加一个time属性，用来保存自己的定时器标识
            obj.time = setInterval(function () {
                //获取box1原来的值
                var oldValue = parseInt(getStyle(obj, attr));
                //在旧值得基础上增加
                var newValue = oldValue + speed;

                //800向0移动，向左移动，需要判断newValue是否小于target  speed负值newValue<target时，比如target=0，小于0让他dengyu0
                //0到800移动，向右移动，需要判断newValue是否大于target
                if ((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) {
                    newValue = target;
                }

                //将新值设置为box1,[attr]是一个变量不能用.attr
                obj.style[attr] = newValue + "px";

                //当元素移动到0px时，使其停止执行移动
                if (newValue == target) {
                    //达到目标，关闭定时器
                    clearInterval(obj.time);
                    //动画执行完毕，调用回调函数
                    callback && callback();//如果传了回调函数就执行，没有就不执行
                }

            }, 30);

        }
    </script>
</head>

<body>
    <button id="btn01">点击按钮box1向右移</button>&nbsp;<button id="btn02">点击按钮box1向左移</button>&nbsp;
    <button id="btn03">点击按钮box2向右移</button>
    <button id="btn04">测试按钮</button><br><br>
    <div id="box1"></div>
    <div id="box2"></div>
    <div style="width:0;height:1000px;border-left:1px black solid;position:absolute;left:800px;top: 0;"></div>
</body>

</html>

结果：

点击第一、第三个按钮

喵俺第一专栏

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
js定时器案例3

增加了几个新的按钮，点击按钮box2向右移动，测试按钮通过修改定义函数move，添加参数可以自定义进行div的移动，和变化attr：要执行动画的样式,比如left top width height：//move(box2, 10, 800, "width");//box2宽度向右边长//move(box2, 10, 800, "top");//box2向下移动//move(box2, 10, 800, "height");//box2向下边长详细代码如下：<!DO..
复制链接

扫一扫