這段代碼哪里錯了，為什么顯示的寬度沒有任何變化
目標效果：鼠標懸浮，寬度變寬，鼠標移出，寬度恢復，但是不知道代碼哪里有問題，鼠標移動沒有任何變化？
<!DOCTYPE?html>
<html?xmlns="http://">
<head>
????<meta?http-equiv="Content-Type"?content="text/html;charset=utf-8"></meta>?????
????<title>多物體運動</title>
????<link?href="css/main.css"?rel="stylesheet"?/>
????<style?type="text/css">
???????ul,li?{
??????? list-style:?none;
???????}
???????ul?li{
??????? width:?200px;
??????? height:?100px;
??????? background:?yellow;
??????? margin-bottom:?20px;
????????border:?2px?solid?red;
???????}
????</style>
????<script>
????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?startMove(obj,iTarget){????????????
???? clearInterval(obj.timer);??
???? obj.timer=setInterval(function(){
???? var?icur=parseInt(getStyle(obj,'width'));
????????????var?speed=(iTarget-icur)/8;
???? speed=speed>0?Math.ceil(speed):Math.floor(speed);
???? if?(icur==iTarget)?{
???? clearInterval(obj.timer);
???? }
???? else{
???? obj.style.width=icur+speed+'px';
???? }
???? },30)
????}
????</script>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
2016-08-29
同學 ?你的getStyle沒有封裝啊
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}
else{
return getComputedStyle(obj,false)[attr];
}
}