                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /JS動畫效果

鏈式運動實現(xiàn)有可以動，但是邊框有重疊

<!DOCTYPE?html>
<html>
<head>
<meta?charset="utf-8">
<script?src="jsonmove.js"></script>
<style?type="text/css">
body,ul,li{
margin:?0;
padding:?0;
}
ul,li{
width:?200px;
height:?100px;
background-color:yellow;
margin-bottom:20px;
border:4px?solid?#000;
filter:?alpha(opacity:30);
opacity:?0.3;?
}
</style>
<script?type="text/javascript">
window.onload?=?function()?{
var?oLi?=?document.getElementById('li1');
oLi.onmouseover?=?function(){
//startMove(oLi,'width',400);
/*寬高不能同時動，因為第二個定時器會覆蓋第一個，如果想要同時動需要用到JSON(輕量級的數(shù)據(jù)交換格式)*/
//startMove(oLi,'height',200);
startMove(oLi,{width:400,height:200,opacity:100});
}
oLi.onmouseout?=?function(){
startMove(oLi,{width:200,height:100,opacity:30});
}
}
</script>
<title></title>
</head>
<body>
<ul>
<li?id="li1"></li>
</ul>
</body>
</html>

function?getStyle(obj,attr){
	if(obj.currentStyle){
		return?obj.currentStyle[attr];
	}else{
		return?getComputedStyle(obj,false)[attr];
	}
}
//json：多對值的變化
//startMove(obj,{attr1:itarget1,attr2:itarget2},fn)
//回調(diào)函數(shù)fn
function?startMove(obj,json,fn){
	clearInterval(obj.timer);

	obj.timer?=?setInterval(function(){
		//取當前json的值做循環(huán)
		for(var?attr?in?json){s
			//1、取當前的值
	?		var?icur?=?0;
	?		if(attr?==?'opacity'){
	?			icur?=?Math.round(parseFloat(getStyle(obj,attr))*100);
	?		}else{
	?			icur?=?parseInt(getStyle(obj,attr));
	?		}
	?		//2、算速度
			var?speed?=?(json[attr]-icur)/8;
			//
			speed?=?speed>0?Math.ceil(speed):Math.floor(speed);
			//3、檢測停止
			if?(icur?==?json[attr])?{
				clearInterval(obj.timer);
				if?(fn)?{
					fn();
				}?
			}else{
				if?(attr?==?'opacity')?{
					obj.style.filter?=?'alpha(opacity:'+(icur+speed)+')';//ie
					obj.style.opacity?=?(icur+speed)/100;//火狐，chrome
				}?else?{
					obj.style[attr]?=?icur+speed+'px';
				}
			}
		}

	},30)
}

我的代碼寫出來運行后去下圖，求大大幫看哪里寫錯了