随笔 - 11  文章 - 2  评论 - 1

鼠标移入移出改变透明度 

 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>
View Code

 

posted @ 2016-04-05 00:39  Double405  阅读(376)  评论(0)    收藏  举报