多属性运动

代码

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

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

        #box {
            width: 150px;
            height: 150px;
            background: darkcyan;
            opacity: 0.2;
            position: absolute;
            border: 2px solid #ccc;
            left: 0;
            top: 0;
        }
    </style>
</head>

<body>
    <div id="box"></div>

    <script>
        var box = document.getElementById('box');
        box.onclick = function () {
            run(box, {            // 将多个元素属性作为对象方式传进来
                'width': 400,
                'height': 400,
                'opacity': 100
            });
        }





        function run(ele, json) {  // json 对象
            clearInterval(ele.timer);
            ele.timer = setInterval(function () {  // 开启每个元素自己的定时器
                var tag = true;  // 开关标志
                for (var i in json) {  // i:属性名   json[i]:属性值
                    if (i == 'opacity') {
                        var cur = parseFloat(getStyle(ele, i)) * 100;  // 透明度
                    } else {
                        var cur = parseInt(getStyle(ele, i));  // 大小，位置等 当前值
                    }
                    //  （目标值 - 当前值）/ 缩放比例
                    var speed = (json[i] - cur) / 10;  // 变速
                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);  // 向右走 变速正，需要向上取整，反之向左走 变速负数，需要向下取整

                    if(cur != json[i]){  // 当前值未达到目标值时
                        tag = false;
                    }
                    // 赋值
                    if (i == 'opacity') {  // 透明度赋值
                        ele.style[i] = (cur + speed) / 100;
                    } else {
                        ele.style[i] = cur + speed + 'px';
                    }

                    if(tag){
                        clearInterval(ele.timer);
                    }

                }
            }, 50)
        }



        // 获取元素非行间样式
        function getStyle(ele, attr) {
            if (window.getComputedStyle) {  // 标准
                return getComputedStyle(ele)[attr];
            } else {  // ie
                return ele.currentStyle[attr];
            }
        }
    </script>
</body>

</html>
多属性运动

代码

效果
