1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title>鼠标移入移出改变透明度</title> 6 <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" media="all"/> 7 <link rel="stylesheet" type="text/css" href="../css/bootstrap-theme.min.css" media="all"/> 8 <link rel="stylesheet" type="text/css" href="../css/reset.css" media="all"/> 9 <style type="text/css"> 10 .demo1{ width:350px; text-align:left;} 11 </style> 12 </head> 13 <body> 14 <div class="demo1"> 15 <img id="img" src="http://img13.360buyimg.com/n1/jfs/t253/339/684583987/309716/5da5fdcb/53ef8a13Ncc2614f0.jpg" alt=""/> 16 </div> 17 <script> 18 (function(){ 19 var img = document.getElementById('img'); 20 img.onmouseover = function(){ 21 fade(this, 30); 22 } 23 img.onmouseout = function(){ 24 fade(this, 100); 25 } 26 27 function css(obj, attr){ 28 if(obj.currentStyle){ 29 return obj.currentStyle[attr]; 30 } else { 31 return getComputedStyle(obj, false)[attr]; 32 } 33 } 34 function fade(obj, target){ 35 clearInterval(obj.timer); 36 obj.timer = setInterval(function(){ 37 var alpha = 0; 38 var cur = css(obj, 'opacity') * 100; 39 alpha = (target - cur) / 8; 40 alpha = alpha > 0 ? Math.ceil(alpha) : Math.floor(alpha); 41 var stop = true; 42 if(cur != target){ 43 stop = false; 44 } 45 cur += alpha; 46 obj.style.fitler = 'alpha(opacity=' + cur + ')'; 47 obj.style.opacity = cur / 100; 48 if(stop){ 49 clearInterval(obj.timer); 50 obj.timer = null; 51 } 52 }, 30); 53 } 54 }()); 55 </script> 56 </body> 57 </html>