透明度变化 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style>
 7             #div1{width: 200px; height: 200px;background-color:red;
 8             filter: alpha(opacity:30); opacity: 0.3;}
 9       </style>
10         <script>
11             window.onload=function(){
12                 var oDiv=document.getElementById('div1');
13 
14                 oDiv.onmouseover=function(){
15                     startMove(100);
16                 };
17                 oDiv.onmouseout=function(){
18                     startMove(30);
19                 };
20             }
21             var alpha=30;
22             var timer=null;
23 
24             function startMove(iTarget){
25                 var oDiv=document.getElementById('div1');
26 
27                 clearInterval(timer);
28                 timer=setInterval(function(){
29                     var speed=0;
30 
31                     if(alpha<iTarget){
32                         speed=10;
33                     }else   {
34                         speed=-10;
35                     }
36 
37 
38                     if(alpha==iTarget){
39                         clearInterval(timer);
40                     }
41                     else{
42                         alpha+=speed;
43 
44                         oDiv.style.filter='alpha(opacity:'+alpha+')';
45                         oDiv.style.opacity=alpha/100;
46                     }
47                 },30);
48             }
49 
50         </script>
51     </head>
52     <body>
53         <div id="div1">
54         </div>
55     </body>
56 </html>
View Code

 

posted @ 2020-04-28 10:19  孝文  阅读(97)  评论(0)    收藏  举报