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

练习js透明度动画的时候报了这样的错误：part2-opacity.html?_ijt=p2ei6la3k2jfia9gtb6od1s006:27 Uncaught TypeError: Cannot set property 'onmouseover' of null at window.onload

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>透明度动画</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .block{
            width: 80px;
            height: 80px;
            filter:alpha(30);
            opacity: 0.3;
            background: #f00;
        }
    </style>
</head>
<body>
<div class="block"></div>

<script>
    window.onload = function() {
        var oDiv = document.getElementById('block');

        oDiv.onmouseover=function(){
            startMove(100);
        };
        oDiv.onmouseout=function(){
            startMove(30);
        };
    };

    var speed = 0;
    var alpha = 30;
    var timer = null;
    function startMove(iTarget){
        var oDiv = document.getElementById('block');
        clearInterval(timer);
        timer = setInterval(function(){
            if(oDiv.alpha > iTarget){
                speed = -10;
            }else{
                speed = 10;
            }
            if(oDiv.alpha == iTarget){
                clearInterval(timer);
            }else{
                alpha += speed;
                oDiv.style.filter = 'alpha(opacity:'+alpha+')'; // 兼容IE
 oDiv.style.opacity = alpha/100;  // Firefox Chrome
 }
        },30);
    }

</script>
</body>
</html>