鼠标移入移出改变透明度

Posted double2014

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了鼠标移入移出改变透明度相关的知识,希望对你有一定的参考价值。

 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

 

以上是关于鼠标移入移出改变透明度的主要内容,如果未能解决你的问题,请参考以下文章

鼠标指针移入移出改变图片透明度

鼠标移入移出透明度变化效果

React练习 5 :鼠标移入移出改变样式

JavaScript 入门练习2:鼠标移入移出改变 div 大小

jquery实现星级评分,鼠标移入和移出改变评分

鼠标悬浮_鼠标移入/移出触发函数