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回答
-
墨小漓
巴拉巴拉巴拉，I Seewindow.getComputedStyle(Idv1, false).opacity ； //原来这货返回的是一个字符串
随时随地看视频慕课网APP
Html/CSS
JavaScript