完美运动框架，随意调用，兼容性好

1、blue老师编写完美运动框架，随意调用（可多次），兼容性好，用于多个物体多次运动（不是同时运动）

 1 function getStyle(obj, name)
 2 {
 3     if(obj.currentStyle)
 4     {
 5         return obj.currentStyle[name];
 6     }
 7     else
 8     {
 9         return getComputedStyle(obj, false)[name];
10     }
11 }
12 
13 function startMove(obj, attr, iTarget, fnEnd)
14 {
15     clearInterval(obj.timer);
16     obj.timer=setInterval(function (){
17         var cur=0;
18         
19         if(attr=='opacity')
20         {
21             cur=Math.round(parseFloat(getStyle(obj, attr))*100);
22         }
23         else
24         {
25             cur=parseInt(getStyle(obj, attr));
26         }
27         
28         var speed=(iTarget-cur)/6;
29         speed=speed>0?Math.ceil(speed):Math.floor(speed);
30         
31         if(cur==iTarget)
32         {
33             clearInterval(obj.timer);
34             
35             if(fnEnd)fnEnd();
36         }
37         else
38         {
39             if(attr=='opacity')
40             {
41                 obj.style.filter='alpha(opacity:'+(cur+speed)+')';
42                 obj.style.opacity=(cur+speed)/100;
43             }
44             else
45             {
46                 obj.style[attr]=cur+speed+'px';
47             }
48         }
49     }, 30);
50 }

调用：

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>无标题文档</title>
 6 <style>
 7 #div1 {width:100px; height:100px; background:red; filter:alpha(opacity:30); opacity:0.3;}
 8 </style>
 9 <script src="move.js"></script>
10 <script>
11 window.onload=function ()
12 {
13     var oDiv=document.getElementById('div1');
14     
15     oDiv.onmouseover=function ()
16     {
17         startMove(oDiv, 'width', 300, function (){
18             startMove(oDiv, 'height', 300, function (){
19                 startMove(oDiv, 'opacity', 100);
20             });
21         });
22     };
23     
24     oDiv.onmouseout=function ()
25     {
26         startMove(oDiv, 'opacity', 30, function (){
27             startMove(oDiv, 'height', 100, function (){
28                 startMove(oDiv, 'width', 100);
29             });
30         });
31     };
32 };
33 </script>
34 </head>
35 
36 <body>
37 <div id="div1"></div>
38 </body>
39 </html>

 

2、blue老师编写完美运动框架，随意调用（可多次），兼容性好，用于多个物体多次运动（同时运动）

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

调用：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title></title>
　　<script src="move.js"></script>
    <script type="text/javascript">
window.onload = function(){
    var odiv1 = document.getElementById('div1');
    var odiv2 = document.getElementById('div2');
    var odiv3 = document.getElementById('div3');
    var odiv4 = document.getElementById('div4');
    
    odiv1.onmouseover = function(){
        startMove(odiv1, {width:200, height:200, opacity:30});
    }
    
    odiv2.onmouseover = function(){
        startMove(odiv2, {width:200, height:200, opacity:30});
    }
    
    odiv3.onmouseover = function(){
        startMove(odiv3, {width:200, height:200, opacity:30});
    }
    
    odiv4.onmouseover = function(){
        startMove(odiv4, {height:220});
    }
}
    </script>
    <style type="text/css">
        #div1,#div2,#div3,#div4{width:100px; height:100px; background:red; float:left; margin-left:20px; border:5px solid black;}
    </style>
</head>
<body>
    <div id='div1'></div>
    <div id='div2'></div>
    <div id='div3'></div>
    <div id='div4'></div>
</body>
</html>

 

posted @ 2013-11-01 10:42  远方的远方  阅读(405)  评论(0)  编辑  收藏  举报