为了账号安全,请及时绑定邮箱和手机立即绑定

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>


正在回答

1 回答

Idv1.style.opacity=chopacity+speed;

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

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

0 回复 有任何疑惑可以回复我~
#1

墨小漓 提问者

(≧▽≦)thank you思密达。
2016-09-29 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
JS动画效果
  • 参与学习       113925    人
  • 解答问题       1443    个

通过本课程JS动画的学习,从简单动画开始,逐步深入各种动画框架封装

进入课程

js透明度动画问题

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信