猿问

js透明度动画问题

// God,调试了很久没调试出来


//小白想问一下各位大大,代码什么地方出现了错误,先不考虑IE浏览器兼容性问题。感激不尽。




<!DOCTYPE html>


<html>


<head>


<meta charset="UTF-8">


<title>ctopacity</title>


<style type="text/css">


body,div{


margin: 0;


padding: 0;




}


#div1{


width: 200px;


height: 200px;


background: red;


filter: alpha(opacity:30);


opacity:0.7;


}


</style>


<script type="text/javascript">


window.onload=function(){


var Idv1=document.getElementById('div1');


Idv1.onmouseover=function(){startmove(0.1);   //移入,opacity值越小,越透明


}


}


var timer=null;


 function startmove(itarget){


  var Idv1=document.getElementById('div1');


   clearInterval(timer);


 timer=setInterval(function(){


  var chopacity= window.getComputedStyle(Idv1,false).opacity;//Idv1.style.opacity;


  //alert(chopacity);


  //console.log("透明度:" + chopacity);


  var speed=0;


        if(chopacity>itarget){         //移入,opacity值越小,越透明


        speed=-0.1;


        }


       else if(chopacity<itarget){


            speed=0.1;   


         }


           //console.log(1);


      if(Idv1.style.opacity==itarget)


       { 


       clearInterval(timer);


       }


  else{


       Idv1.style.opacity=chopacity+speed;


       console.log("透明:" + Idv1.style.opacity );


        } 


        },30);


 }


</script>


</head>


<body>


<div id="div1">


</div>


</body>


</html>




墨小漓
浏览 1182回答 1
1回答

墨小漓

巴拉巴拉巴拉,I Seewindow.getComputedStyle(Idv1, false).opacity ; //原来这货返回的是一个字符串
随时随地看视频慕课网APP
我要回答