                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /JS動畫效果

哪里錯了嗎

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>多物體運動</title>
<style>
ul,li{
?? ?list-style:none;
?? ?
}
ul li{
?? ?width:200px;
?? ?height:100px;
?? ?background:yellow;
?? ?margin-bottom:20px;
??? }?? ?
?
</style>
<script>
window.onload=function(){
?? ?var aLi=document.getElementsByName('li');
?? ?for(var i=0;i<aLi.length;i++){
?? ??? ?aLi[i].onmouseover=function(){
?? ??? ??? ?startMove(this,400);
?? ??? ??? ?}
?? ??? ??? ?aLi[i].onmouseout=function(){
?? ??? ??? ??? ?startMove(this,200);
?? ??? ??? ??? ?}
?? ??? ?}
?? ?}
?? ?var timer=null;
?? ?function startMove(obj,iTarget){
?? ??? ?clearInterval(timer);//關閉定時器
?? ??? ?timer=setInterval(function(){//開啟定時器.下面在定義速速
?? ??? ? var speed=(iTarget-obj.offsetWidth)/8;
?? ??? ??? ?speed=speed>0?Math.ceil(speed):Math.floor(speed);
?? ??? ??? ?if(obj.offsetWidth==iTarget){//如果當時寬度等于目標
?? ??? ??? ??? ?clearInterval(timer);
?? ??? ??? ?}
?? ??? ??? ?
?? ??? ??? ??? ?else{
?? ??? ??? ??? ??? ?obj.syle.width=obj.offsetWidth+speed+'px';
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?}
?? ??? ??? ?
?? ??? ??? ?},30)
?? ??? ?
?? ??? ?}
</script>
</head>

<body>
<ul>
?? ?<li></li>
?? ?<li></li>
??? <li></li>
</ul>
</body>
</html>