今天下午练习了下这个图片的淡入淡出小demo，如有不足，还请前辈多多指导^-^~
总结如下：
第一种方法：
个人觉得第一种方法比较好，同时兼容IE8以下浏览器，但是如下代码中，不知可不可以将timer和alpha也作为参数封装到函数内，感觉貌似也没必要 - -!......
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 div{display:inline-block;opacity:.3;filter:alpha(opacity:30);} 8 img{vertical-align:top;} 9 </style> 10 <script type="text/javascript"> 11 window.onload=function(){ 12 var odiv=document.getElementById("div"); 13 var timer=null; 14 var alpha=30; 15 var speed=1; 16 17 odiv.onmouseover=function(){ 18 startChange(odiv,speed,100); 19 } 20 odiv.onmouseout=function(){ 21 startChange(odiv,speed,30); 22 } 23 function startChange(obj,speed,target){ 24 clearInterval(timer); 25 speed=target>alpha?speed:-speed; 26 timer=setInterval(function(){ 27 if(alpha==target){ 28 clearInterval(timer); 29 }else{ 30 alpha+=speed; 31 } 32 obj.style.opacity=alpha/100; 33 obj.style.filter="alpha(opacity:"+alpha+")"; 34 },20); 35 } 36 } 37 </script> 38 </head> 39 <body> 40 <div id="div"> 41 <img src="desert.jpg" alt="" /> 42 </div> 43 </body> 44 </html>
第二种方法：
直接利用opacity属性，但还不支持IE8以下的浏览器。另外，在以下32行代码中，还容易出现诡异的小数问题，听说是由于计算机在处理小数的时候，本身就有些问题，但具体如何产生的，以及如何去解决，暂时还不清楚。
还请各位前辈多多指导，我也去查查资料，嘿嘿~
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 div{display:inline-block;opacity:1;} 8 img{display:block;} 9 </style> 10 <script type="text/javascript"> 11 window.onload=function(){ 12 var div1=document.getElementsByTagName("div")[0]; 13 var t=null; 14 var speed=0.1; 15 div1.onmouseover=()=>{ 16 change(div1,speed,0.3); 17 } 18 div1.onmouseout=()=>{ 19 change(div1,speed,1); 20 } 21 function change(obj,speed,target){ 22 clearInterval(t); 23 t=setInterval(()=>{ 24 obj.style.opacity=getComputedStyle(obj,false)["opacity"]; 25 if(obj.style.opacity==target){ 26 clearInterval(t); 27 }else{ 28 if(target==0.3){ 29 obj.style.opacity-=speed; 30 }else if(target==1){ 31 speed+=0.1; 32 console.log(speed); //0.30000000000000004 会出现小数这种BUG 33 obj.style.opacity=speed; 34 } 35 } 36 },50); 37 } 38 } 39 </script> 40 </head> 41 <body> 42 <div> 43 <img src="desert.jpg" alt="" /> 44 </div> 45 </body> 46 </html>