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

哪位大神幫我看看為什么沒有動(dòng)畫效果

<!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>無(wú)標(biāo)題文檔</title>
<style>
?body,div,span,ul,li{ margin:0; padding:0;}
?#div1{ width:200px; height:200px; background:#F00; position:relative; left:-200px; top:0;}
?#div1 span{ width:20px; height:50px; background-color:#00F; position:absolute; left:200px; top:75px;}
?#div2{width:200px; height:200px; background-color:#F00;
??filter:alpha(opacity:30);
??opacity:0.3;
?}
?ul,li{list-style:none;}
?ul li{width:200px; height:100px; background-color:#FF0; margin-bottom:20px;}
</style>
<script type="text/javascript">
?window.onload = function(){
??/*var oDiv = document.getElementById('div1');
??oDiv.onmouseover = function(){
???startMove(0);
??}
??oDiv.onmouseout = function(){
???startMove(-200);
??}
??
??var oDiv2 = document.getElementById('div2');
??oDiv2.onmouseover = function(){
???startMove2(100);
??}
??oDiv2.onmouseout = function(){
???startMove2(30);
??}*/
??
??var aLi = document.getElementsByTagName('li');
??for(var i = 0; i < aLi.length; i++){
???aLi[i].onmouseover = function(){
????startMove3(this,400);
???}
???aLi[i].onmouseover = function(){
????startMove3(this,200);
???}
??}
?}
?
?/*var timer = null;
?function startMove(itarget){
??clearInterval(timer);?
??var oDiv = document.getElementById('div1');
??timer = setInterval(function(){???
???var iSpeed = (itarget-oDiv.offsetLeft)/20;
???iSpeed = iSpeed>0 ? Math.ceil(iSpeed): Math.floor(iSpeed);
???if(oDiv.offsetLeft == itarget){
????clearInterval(timer);?
???}else{
????oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px';
???}
??},30);
?}
?
?var timer2 = null;
?var alpha = 30;
?function startMove2(itarget){
??clearInterval(timer2);
??var oDiv2 = document.getElementById('div2');
??timer2 = setInterval(function(){
???var speed = 0;
???if(alpha > itarget){
????speed = -10;
???}else{
????speed = 10;
???}
???if(alpha == itarget){
????clearInterval(timer2);
???}else{
????alpha += speed;
????oDiv2.style.filter =? 'alpha(opacity:'+alpha+')';
????oDiv2.style.opacity = alpha/100;
???}
??},30);
?}*/
?
?var timer3 = null;
?function startMove3(obj,iTarget){
??clearInterval(timer3);
??timer3 = setInterval(function(){
???var speed = (iTarget - obj.offsetWidth)/8;
???speed = speed >0 ? Math.ceil(speed):Math.floor(speed);
???if(obj.offsetWidth == iTarget){
????clearInterval(timer3);
???}
???else{
????obj.style.width = obj.offsetWidth + speed + 'px';
???}?
??},30);
?}
</script>
</head>