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

有什么辦法能簡化這個代碼嗎？

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

<head>
<meta?charset="UTF-8">
<meta?name="viewport"?content="width=device-width,?initial-scale=1.0">
<meta?http-equiv="X-UA-Compatible"?content="ie=edge">
<title>more</title>
</head>
<style>
*?{
margin:?0;
padding:?0;
}

ul,
li?{
list-style:?none;
}

ul?li?{
width:?200px;
height:?100px;
background:?yellow;
margin-bottom:?20px;
}


div?{
width:?200px;
height:?200px;
background:?red;
margin:?20px;
float:?left;
/*IE下的濾鏡*/
filter:?alpha(opacity:30);
/*其它瀏覽器透明度*/
opacity:?0.3;
}
</style>

<body>
<ul>
<li></li>
<li></li>
<li></li>
</ul>

<div></div>
<div></div>
<div></div>
<div></div>
</body>
<script>
window.onload?=?function?()?{

//只要是多物體運動，所有的東西都不能公用

var?aLi?=?document.getElementsByTagName('li'),
aDiv?=?document.getElementsByTagName('div');
//?li的變寬動畫
for?(var?i?=?0;?i?<?aLi.length;?i++)?{
//?防止全局定時器變量污染?互相爭用定時器?給每一個Li一個定時器
aLi[i].timer?=?null;
aLi[i].onmouseover?=?function?()?{
startMove(this,?400);
}
aLi[i].onmouseout?=?function?()?{
startMove(this,?200);
}
}
//?div的透明度
for?(var?j?=?0;?j?<?aDiv.length;?j++)?{
aDiv[j].timer?=?null;
//?透明度也要防止污染
aDiv[j].alpha?=?30;
aDiv[j].onmouseover?=?function?()?{
startChange(this,?100);
}
aDiv[j].onmouseout?=?function?()?{
startChange(this,?30);
}
}
}

//?var?timer?=?null;
//?變寬動畫方法?傳入兩個函數(shù)?（this-obj?，?iTarget）
function?startMove(obj,?iTarget)?{
clearInterval(obj.timer);
obj.timer?=?setInterval(function?()?{
//?判斷速度值
var?speed?=?(iTarget?-?obj.offsetWidth)?/?10;
speed?=?speed?>?0???Math.ceil(speed)?:?Math.floor(speed);
if?(obj.offsetWidth?==?iTarget)?{
clearInterval(obj.timer);
}?else?{
obj.style.width?=?obj.offsetWidth?+?speed?+?'px';
}
},?30);
}

//?透明度動畫方法
function?startChange(obj,?iTarget)?{
clearInterval(obj.timer);
obj.timer?=?setInterval(function?()?{
//?判斷速度值
var?speed?=?0;
var?speed?=?0;
//?判斷速度的值
if?(obj.alpha?>?iTarget)?{
speed?=?-10;
}?else?{
speed?=?10;
}
if?(obj.alpha?==?iTarget)?{
clearInterval(obj.timer);
}?else?{
//?給透明值賦值
obj.alpha?=?obj.alpha?+?speed;
//?IE下濾鏡
obj.style.filter?=?'alpha(opacity:"+obj.alpha+")';
//?其它瀏覽器透明度
obj.style.opacity?=?obj.alpha?/?100;
}
},?30);

}
</script>

</html>