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>
