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>