js淡入淡出效果框架 

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>无标题文档</title>
 6 <style type="text/css">
 7 body{ margin:0; padding:0; }
 8 .ss{ width:100px; height:100px; background: #009; position: absolute; top:100px; left:100px; opacity:0.1}
 9 
10 
11 </style>
12 </head>
13 
14 <body>
15 
16 <div class="ss" id="a">
17 
18 </div>
19 <script type="text/javascript">
20  var obox=document.getElementById("a");
21  obox.onmouseover=function(){     
22      opcity(100);
23  }
24  obox.onmouseout=function(){     
25      opcity(10);
26  }
27  
28 var alpha=10;
29 function opcity(x){
30      var timer,sp;
31      clearInterval(timer);
32      timer=setInterval(function(){
33            if(alpha<x){
34               sp=10;    
35             }else{    
36                 sp=-10;    
37             }
38          
39           if(alpha==x){
40               clearInterval(timer);
41              
42           }else{
43              alpha+=sp;
44              obox.style.opacity=alpha/100;
45              obox.style.filter="alpha(opacity="+alpha+")";
46           }
47          
48      },20)
49  
50 }
51  
52  
53 
54 </script>
55 
56 </body>
57 </html>

 

posted @ 2013-04-16 10:17  梦飞无颜  阅读(172)  评论(0)  编辑  收藏  举报