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
Idv1.style.opacity=chopacity+speed;
在此處是一個字符串，需要將其轉換為float型。
Idv1.style.opacity=parseFloat(chopacity)+parseFloat(speed);