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

不會變。。。求解

<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<title>Title</title>
????<style>
?body,div{
????????????margin:?0;
?padding:?0;
?}
????????#div1{
????????????width:?200px;
?height:?200px;
?background:?red;
?filter:alpha(opacity:30);
?opacity:?0.3;
?}
????</style>

</head>
<body>
<div?id="div1"></div>
<script>
?window.onload=function?()?{
???????var?odiv=document.getElementById('div1')
???????odiv.onmouseover=function?()?{startMove(100);}
???????odiv.onmouseout=function?()?{startMove(30);}
???}
???var?times=null;
?var?alpha=30;
?var?speed=0;
?function?startMove(iTarget)?{
???????clearInterval(times);
?times=setInterval(function(){
???????????var?odiv=document.getElementById('div1');
?if(alpha>iTarget){
???????????????speed=-10;
?}
???????????else{
???????????????speed=10;
?}
???????????if(alpha==iTarget){
???????????????clearInterval(times);
?}
???????????else{
???????????????alpha+=speed;
?odiv.style.filter='alpha(opacity:'+alpha+')';
?odiv.stlye.opacity=alpha/100;
?}
???????},30)

???}
</script>
</body>
</html>