问答详情
源自:2-2 JS透明度动画

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>


提问者:墨小漓 2016-09-27 12:04

个回答

  • 打开新的标签页_1
    2016-09-27 16:06:15
    已采纳

    Idv1.style.opacity=chopacity+speed;

    在此处是一个字符串,需要将其转换为float型。

    Idv1.style.opacity=parseFloat(chopacity)+parseFloat(speed);