DIV透明度 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
.odiv{
    width:500px;
    height:500px;
}
</style>
<script>
window.onload = function(){
    var odiv = document.getElementsByClassName('odiv');
    for(var i=0;i<odiv.length;i++)
    {
          odiv[i].onmouseover = function(){    startOP(this,60);    }
          odiv[i].onmouseout = function (){    startOP(this,100);    }

          odiv[i].timer = null;//事先定义
          odiv[i].alpha = null;//事先定义
    }
}
function startOP(obj,utarget){
     clearInterval(obj.timer);//闭定时器
     obj.timer = setInterval(function(){
     var speed = 0;
     if(obj.alpha>utarget){
        speed = -10;
     }
     else{
        speed = 10;
     }
     obj.alpha = obj.alpha+speed;
     if(obj.alpha == utarget){
        clearInterval(obj.timer);
     }
     obj.style.opacity = parseInt(obj.alpha)/100;
     //obj.style.filter = 'alpha(opacity:'+obj.alpha+')';基于IE的
     },100); 
}
</script>
<body>
    <div class="odiv"></div>
</body>
</html>

 

posted @ 2022-04-06 10:36  董成龙  阅读(54)  评论(0)    收藏  举报