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

代碼運行不了，找不出原因

<!DOCTYPE?html>
<html>
<head>
<meta?charset="UTF-8">
<title>Document</title>
<style?type="text/css">
body,ul{margin:?0;padding:?0;}
ul,li{
list-style:?none;
}
li{
background:?yellow;
width:?200px;
height:?100px;
border:?10px?solid?#000;
margin-bottom:?10px;
}
</style>
</head>
<body>
<script?type="text/javascript">
window.onload?=?function(){
var?ali?=?document.getElementsByTagName('li');
for?(var?i?=?0;?i?<?ali.length;?i++)?{
ali[i].timer?=?null;
ali[i].onmouseover?=?function(){
startMove(this,400);
}
ali[i].onmouseout?=?function(){
startMove(this,200);
}
}
}
function?getStyle(obj.attr){
if?(obj.currentStyle)?{
return?obj.currentStyle[attr];
}
else{
return?getComputedStyle(obj,false)[attr];
}
}
function?startMove(obj,ita){
clearInterval(obj.timer);
obj.timer?=?setInterval(function(){
var?pg?=?parseInt(getStyle(obj,'width'));
var?speed?=?(ita?-?pg)/10;
speed?=?speed?>?0?Math.ceil(speed):Math.floor(speed);
if?(ita?==?pg)?{
clearInterval(obj.timer);
}
else{
obj.style['width']?=?pg?+?speed?+'px';
}
},30)
}
</script>
<ul>
<li?id="li1"></li>
<li?id="li2"></li>
</ul>
</body>
</html>