                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JS动画效果

为什么我的运行结果透明度还是100，只有光标放到盒子上才会变，刷新一次所有盒子透明度又成了100

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js透明度变化</title>
    <style>
        body,div{
            margin: 0;
            padding: 0;
        }
        div{
            width: 200px;
            height:200px;
            background: red;
            margin: 10px;
            float: left;
            filter:alpha(opacity:30);//透明度30
            opacity:0.3;
        }
    </style>
    <script>
       window.onload=function(){
           var oDiv=document.getElementsByTagName('div');
           for(var i=0;i<oDiv.length;i++){
               oDiv[i].alpha=30;
               oDiv[i].onmouseover=function(){
                   startMove(this,100);
               }
               oDiv[i].onmouseout=function(){
                   startMove(this,30);
               }
           }
       }
        function startMove(obj,iTarget){
            clearInterval(obj.timer);
            obj.timer=setInterval(function(){
                var speed=0;
                if(obj.alpha>iTarget){
                    speed=-10;
                }
                else{
                    speed=10;
                }
                if(obj.alpha==iTarget){
                    clearInterval(obj.timer);
                }
                else{
                   obj.alpha+=speed;
                    //基于ie浏览器
 obj.style.filter='alpha(opactiy:'+obj.alpha+')';
                    //基于非ie浏览器
 obj.style.opacity=obj.alpha/100;
               }
            },30)
        }
    </script>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
    <div id="div4"></div>
</body>
</html>