js透明度动画问题
墨小漓
2016-09-27 12:04
// 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回答
-
- 打开新的标签页_1
- 2016-09-27 16:06:15
Idv1.style.opacity=chopacity+speed;
在此处是一个字符串，需要将其转换为float型。
Idv1.style.opacity=parseFloat(chopacity)+parseFloat(speed);
JS动画效果
113925 学习 · 1443 问题
相似问题