JavaScript动画--透明度-原创手记-慕课网

<!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 type="text/css">
*{
    padding:0;
    margin:0;
}

#div1{
    width:200px;
    height:200px;
    background:red;
    filter:Alpha(opacity:30);
    opacity:0.3;
    position:relative;
    top:0;
    left:200px;
}

#div1 span{
    width:50px;
    height:50px;
    position:absolute;
    top:50px;
    left:50px;
    padding:25px;
    color:blue;
    font-weight:bold;
    text-align:center;
    line-height:50px;

}
</style>

<script type="text/javascript">
window.onload=function(){
    var ODiv = document.getElementById('div1');
    ODiv.onmouseover= function(){
        startMove(100);
    }
    ODiv.onmouseout = function(){
        startMove(30);
    }
}

var timer = null;
var alpha = 30;
function startMove(iTarget){
    var ODiv =  document.getElementById('div1');
    window.clearInterval(timer);
    timer = window.setInterval(function(){
            var speed = 0;
            if(alpha > iTarget){
                speed = -10;
            }else{
                speed = 10;
            }
            if(alpha  == iTarget){
                window.clearInterval(timer);
            }else{
                alpha+=speed;
                ODiv.style.filter='Alpha(opacity:' + alpha + ')';/*IE*/
                ODiv.style.opacity = alpha/100;                 /*chrome*/
            }
        },30);
}
</script>
</head>

<body>
<div id="div1"><span>Hello</span></div>
</body>
</html>