完美运动框架，兼容性好，可多次调用
blue老师写的完美运动框架，兼容性好(IE低版本也兼容)，分享给大家
1、物体的多个属性（样式）不同时运动，有先后的运动顺序，如物体“宽”先运动之后，物体的“高”再运动，即运动的序列化
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>完美运动框架1</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、物体的多个属性（样式）可以同时运动，没有先后的运动顺序之分，如物体的“高”，“宽”，“透明度”同时变化
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
14 //startMove(oDiv, {width: 400, height: 400})
15
16
17 function startMove(obj, json, fnEnd)
18 {
19 clearInterval(obj.timer);
20 obj.timer=setInterval(function (){
21 var bStop=true; //假设：所有值都已经到了
22
23 for(var attr in json)
24 {
25 var cur=0;
26
27 if(attr=='opacity')
28 {
29 cur=Math.round(parseFloat(getStyle(obj, attr))*100);
30 }
31 else
32 {
33 cur=parseInt(getStyle(obj, attr));
34 }
35
36 var speed=(json[attr]-cur)/6;
37 speed=speed>0?Math.ceil(speed):Math.floor(speed);
38
39 if(cur!=json[attr])
40 bStop=false;
41
42 if(attr=='opacity')
43 {
44 obj.style.filter='alpha(opacity:'+(cur+speed)+')';
45 obj.style.opacity=(cur+speed)/100;
46 }
47 else
48 {
49 obj.style[attr]=cur+speed+'px';
50 }
51 }
52
53 if(bStop)
54 {
55 clearInterval(obj.timer);
56
57 if(fnEnd) fnEnd();
58 }
59 }, 30);
60 }
调用上面的运动框架：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>完美运动框架2</title>
8 <style media="screen">
9 #div1,#div2,#div3,#div4{
10 width:100px;
11 height:100px;
12 background:red;
13 float:left;
14 margin-left:20px;
15 border:5px solid black;
16 filter: alpha(opacity:100);
17 opacity: 1;
18 }
19 </style>
20 </head>
21 <body>
22 <div id='div1'></div>
23 <div id='div2'></div>
24 <div id='div3'></div>
25 <div id='div4'></div>
26
27 <script type="text/javascript" src="move2.js"></script>
28 <script type="text/javascript">
29 window.onload=function(){
30 var odiv1 = document.getElementById('div1');
31 var odiv2 = document.getElementById('div2');
32 var odiv3 = document.getElementById('div3');
33 var odiv4 = document.getElementById('div4');
34
35 odiv1.onmouseover = function(){
36 startMove(odiv1, {width:200, height:200, opacity:30});
37 }
38 odiv1.onmouseout = function(){
39 startMove(odiv1, {width:100, height:100, opacity:100});
40 }
41
42 odiv2.onmouseover = function(){
43 startMove(odiv2, {width:200, height:200, opacity:30});
44 }
45
46 odiv3.onmouseover = function(){
47 startMove(odiv3, {width:200, height:200, opacity:30});
48 }
49
50 odiv4.onmouseover = function(){
51 startMove(odiv4, {height:220});
52 }
53 }
54 </script>
55 </body>
56 </html>
