封装缓动动画函数添加多个属性和回调函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        input {
            margin-top: 300px;
        }
        #dv {
            height: 200px;
            width: 200px;
            background-color: pink;
            position: absolute;
            left:0;
            top: 0;
        }
    </style>
</head>
<body>
<div id="dv"></div>
<input type="button" value="移到400" id="btn">
<input type="button" value="移到800" id="btn1">
<script src="common.js"></script>
<script>
    my$("btn").onclick = function () {
        //var json={"width":400,"height":500};
        //animate1(my$("dv"),json);
        animate1(my$("dv"),{"width":400,"height":500},function(){
            //图形两次变化，可以再加
            animate1(my$("dv"),{"width":40,"height":50});
        });
        //这些属性和值存入json对像中
    };
    //获取某个元素距离某边界的距离
    function getStyle(element,attr){
        //如果这个方法存在
        if(window.getComputedStyle){
            //谷歌支持，火狐支持
            return window.getComputedStyle(element,null)[attr];
            //return window.getComputedStyle(element,null).left;
            //return window.getComputedStyle(element,null)["left"];
        }else{
            //IE8支持
            return element.currentStyle[attr];
            //返回的是一个字符串
        }
    }
    //缓动函数的封装
    function animate1(element,json,fn) {
        clearInterval(element.timer);
        element.timer = setInterval(function () {
        var flag=true;//假设全部达到目标
            //遍历json对象里面的键值对，其中attr为键或属性
        for(var attr in json) {
                //定义target为json对象里面的键的值
                var target = json[attr];
                //字符串转整数
                var current = parseInt(getStyle(element, attr));
                var step = (target - current) / 10;
                //向上取整和向下取整
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                current += step;
                element.style[attr] = current + "px";
                if (current != target) {
                    //如果有一个属性没有到达目标
                    flag = false;
                }
            }
            if (flag) {
            //所有属性到达目标再清理定时器
                clearInterval(element.timer);
                //判断用户有没有传入这个函数，若传了就执行
                if(fn) {
                    fn();
                }
            }
            //测试代码：
            console.log("当前位子："+current+",目标位子："+target+"步数为："+step);
            }, 200);
    }
</script>
</body>
</html>
来源：CSDN
作者：天马行空zqzq
链接：https://blog.csdn.net/qq_42039912/article/details/104756331
标签
动画