javascript7图片的淡入淡出
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 #img1{opacity: 0.3;} 8 </style> 9 <script> 10 window.onload=function(){ 11 12 var oTmg=document.getElementById("img1"); 13 oTmg.onmouseover=function(){ 14 startMove(100); 15 } 16 oTmg.onmouseout=function(){ 17 startMove(30); 18 } 19 } 20 var alpha=30; 21 var timer=null; 22 function startMove(iTarget){ 23 var oTmg=document.getElementById("img1"); 24 clearInterval(timer); 25 var speed=2; 26 speed=iTarget>alpha?Math.abs(speed):-Math.abs(speed); 27 timer=setInterval(function(){ 28 if(iTarget==alpha){ 29 clearInterval(timer); 30 }else{ 31 alpha+=speed; 32 } 33 oTmg.style.opacity=alpha/100; 34 },30); 35 } 36 </script> 37 </head> 38 <body> 39 <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1970585368,2576171845&fm=26&gp=0.jpg" id="img1" /> 40 </body> 41 </html>