为什么我跟着老师敲的代码，同时运动用json替代以后，没有效果？-慕课网

为什么我跟着老师敲的代码，同时运动用json替代以后，没有效果？

来源：6-2 完美运动框架

鼎晨要住顶层

2017-07-07 12:08

function startMove(obj, json, fn) {

    clearInterval(obj.timer); //清除定时器，避免重复生成多个定时器
    obj.timer = setInterval(function() {
        var flag = true; //假设刚开始时所有运动都已完成
        for (var attr in json) { //遍历json

            var icur = null;
            //1.判断类型
            if (attr == 'opacity') {
                icur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
            } else {
                icur = parseInt(getStyle(obj, attr));
            }
            //2.算速度
            var speed = (json[attr] - icur) / 10;
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
            //3.检测停止
            if (icur != json[attr]) {
                flag = false;
            }
            if (attr == 'opacity') {
                obj.style.filter = 'alpha(opacity:' + (icur + speed) + ')';
                obj.style.opacity = (icur + speed) / 100;
            } else {
                obj.style[attr] = icur + speed + 'px';
            }
        }
        if (flag) { //当所有运动都完成时，清除定时器
            clearInterval(obj.timer);
            if (fn) {
                fn();
            }
        }
    }, 30);
}


function getStyle(obj, attr) {
    if (obj.currentStyle) {
        return obj.currentStyle[attr];
    } else {
        return getComputedStyle(obj, false)[attr];
    }
}

HTML文档——————————

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>同时运动</title>
	<style>
		*{
			margin:0;
			padding:0;
		}
		
		ul,li {
            list-style:none;
        }
		
        ul li {
            width:200px;
            height:100px;
            background:yellow;
            margin-bottom:20px;
			border:4px solid #000;
			filter:alpha(opacity:30);
			opacity:0.3; 
        }
	<script src="js/move.js"></script>
	<script>
		window.onload=function(){
			var oLi=document.getElementById('li1');
			oLi.onmouseover=function(){
				startMove1(oLi,{width:400,height:200});
			}
		}
	</script>
	</style>
	
	</head>
	<body>
		<ul>
			<li id="li1"></li>
		</ul>
	</body>
</html>

写回答关注