JS完美运动框架

多个值同时变化

setStyle同时设置多个属性

参数传递

json的使用

for in遍历属性

<!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>
        #div{
            width: 200px;
            height: 200px;
            background: red;
            margin: 20px;
            filter: alpha(30);
            opacity: 0.3;
        }
    </style>
   
    <script>
        window.onload = function(){
            var oDiv = document.getElementById('div');
            oDiv.onmouseover = function () {
                startMove(oDiv, {202,height:300,opacity:100},function () {
                    console.log(123)//判断定时器有没有停止
                })
            }
        }
    </script>
</head>
<body>
    <div id="div"></div>
</body>
<script src="move2.js"></script>
</html>

move2.js

function getStyle(obj,name){
    if (obj.currentStyle) {
        return obj.currentStyle[name];
    } else {
        return getComputedStyle(obj,false)[name]
    }
}
//var alpha = 30;所有的东西都不能公用
function startMove (obj,json,fnEnd) {
    clearInterval(obj.time);
    obj.time = setInterval(function(){
        var bStop=true;//假设所有的值都到了
        for(var attr in json){
            var cur = 0;
            if (attr == 'opacity') {
                cur = Math.round(parseFloat(getStyle(obj,attr))*100);
            } else {
                cur = parseInt(getStyle(obj,attr));
            }
            var speed = (json[attr]-cur)/6;
            speed = speed>0?Math.ceil(speed):Math.floor(speed);

            if(cur !== json[attr]){//如果有一个值没到
                bStop=false;//设置为fslse
            }
            if (attr == 'opacity') {
                obj.style.filter = 'alpha(opacity:'+(cur+speed)+')';
                obj.style.opacity = (cur+speed)/100;
            } 
            else {
                obj.style[attr] = cur+speed+'px';
            }
        }
            if (bStop) {
                clearInterval(obj.time);
                if (fnEnd) fnEnd();
            }
       
    },30)
}