JavaScript完美运动框架

 1 function getStyle(obj,name) {
 2     if(obj.currentStyle){
 3         return obj.currentStyle[name];
 4     }
 5     else{
 6         return getComputedStyle(obj,false)[name];
 7     }
 8 }
 9 
10 function startMove(obj,json,cFun) {
11     clearInterval(obj.timer);
12     obj.timer=setInterval(function(){
13         var cur=0;
14         var bStop=true; //假设所有值都已经到了目标点
15         for(var attr in json){
16             if(attr=='opacity'){
17                 cur=Math.round(parseFloat(getStyle(obj,attr))*100);
18             }
19             else{
20                 cur=parseInt(getStyle(obj,attr));
21             }
22     
23             var speed=(json[attr]-cur)/6;
24             speed=speed>0?Math.ceil(speed):Math.floor(speed);
25     
26             if(cur!=json[attr]){
27                 bStop=false;
28             }
29 
30             if(attr=='opacity'){
31                 obj.style.filter='alpha(opcity:'+(cur+speed)+')';
32                 obj.style.opacity=(cur+speed)/100;
33             }
34             else{
35                 obj.style[attr]=cur+speed+'px';
36             }
37         }
38         if(bStop){
39             clearInterval(obj.timer);
40             if(cFun)cFun();
41         }
42     },30);
43 }

move.js

使用方式：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style>
 7             #div1{width: 300px; height: 300px;background-color:red;opacity: 0.3;}
 8         </style>
 9         <script src="move2.js"></script>
10         <script>
11             window.onload=function(){
12                 var oDiv=document.getElementById('div1');
13 
14                 oDiv.onmouseover=function(){
15                     startMove(oDiv,{width:600,height:600,opacity:100},function(){
16                     })
17                 }
18                 oDiv.onmouseout=function(){
19                     startMove(oDiv,{width:300,height:300,opacity: 30},function(){
20                     })
21                 }
22             }
23         </script>
24     </head>
25     <body>
26         <div id="div1">
27         </div>
28     </body>
29 </html>

View Code

JavaScript完美运动框架

猜你喜欢