zoukankan html css js c++ java

透明度变化

 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

查看全文

相关阅读:
表达式的计算
 树、森林、与二叉树的转换
 线索二叉树
 表达式树
 js正则表达式处理表单
 kmp匹配算法
 SQL练习题
 ajax添加header信息
 mvc中webapi添加后没法访问解决办法
 mysql修改表引擎Engine

原文地址：https://www.cnblogs.com/shangec/p/12792301.html