一个流产的Demo效果(什么孩子没了？)
代码
1
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
2 < html xmlns ="http://www.w3.org/1999/xhtml" >
3 < head >
4 < meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />
5 < title > Move Demo </ title >
6 < style type ="text/css" >
7 .move { position : absolute ; line-height : 100% ; text-align : center ; border : #66F dashed 1px ; overflow : hidden ; }
8 </ style >
9 </ head >
10 < body >
11 < div style ="margin-top:120px; position:relative;" >
12 < div id ="move1" class ="move" > Move Demo1 </ div >
13 < div id ="move2" class ="move" > Move Demo2 </ div >
14 < div id ="move3" class ="move" > Move Demo3 </ div >
15 < div id ="move4" class ="move" > Move Demo4 </ div >
16 < div id ="move5" class ="move" > Move Demo5 </ div >
17 </ div >
18
19 < script type ="text/javascript" >
20 // 获取对象
21 function $() {
22 var elements = new Array();
23 for ( var i = 0 ; i < arguments.length; i ++ ) {
24 var element = arguments[i];
25 if ( typeof element == ' string ' )
26 element = document.getElementById(element);
27 if (arguments.length == 1 )
28 return element;
29 elements.push(element);
30 }
31 return elements;
32 }
33 // 初始化变量
34 var info = [
35 {id: ' move1 ' ,step: 1 ,index: 1 ,posX: 0 ,posY: 0 ,scaleX: 0 ,scaleY: 0 },
36 {id: ' move2 ' ,step: 2 ,index: 2 ,posX: 0 ,posY: 0 ,scaleX: 0 ,scaleY: 0 },
37 {id: ' move3 ' ,step: 3 ,index: 3 ,posX: 0 ,posY: 0 ,scaleX: 0 ,scaleY: 0 },
38 {id: ' move4 ' ,step: 4 ,index: 4 ,posX: 0 ,posY: 0 ,scaleX: 0 ,scaleY: 0 },
39 {id: ' move5 ' ,step: 5 ,index: 5 ,posX: 0 ,posY: 0 ,scaleX: 0 ,scaleY: 0 }
40 ];
41 var shortData = [];
42 // 排序
43 function _sort(a,b){
44 return a[col] - b[col];
45 }
46 function mysort(i){
47 col = i;
48 shortData = shortData.sort(_sort);
49 }
50 // 定义全局变量
51 var moveTime = {};
52 var MaxSizeW = 200 ;
53 var MaxSizeH = 200 ;
54 var total = info.length;
55 var centerI = Math.round(total / 2);
56 // 获取宽度
57 function getPxy(step){
58 var pw = 0 ;
59 for ( var i = 1 ;i < step;i ++ ){
60 pw += info[i - 1 ].scaleX;
61 }
62 return pw;
63 }
64 // 设置初始位置
65 function resetInfo(info){
66 for ( var i = 0 ;i < total;i ++ ){
67 var obj = info[i];
68 obj.index = (obj.step > centerI) ? centerI - (obj.step - centerI):obj.step;
69 obj.scaleX = MaxSizeW * (obj.index / total)*2;
70 obj.scaleY = MaxSizeH * (obj.index / total)*2;
71 obj.posX = 30 * (obj.step - 1 ) + getPxy(obj.step);
72 obj.posY = MaxSizeH - obj.scaleY;
73 shortData.push([obj.id,obj.step]);
74 }
75 for ( var i = 0 ;i < total;i ++ ){
76 $(info[i].id).style.top = info[i].posY + ' px ' ;
77 $(info[i].id).style.left = info[i].posX + ' px ' ;
78 $(info[i].id).style.width = info[i].scaleX + ' px ' ;
79 $(info[i].id).style.height = info[i].scaleY + ' px ' ;
80 }
81 }
82 // 移动元素
83 function movethis(){
84 var fromId,toId;
85 for ( var i = 0 ;i < shortData.length;i ++ ){
86 var thisstep = shortData[i][ 1 ];
87 var thisid = shortData[i][ 0 ];
88 -- thisstep;
89 if (thisstep == 0 ){
90 fromId = thisstep;
91 shortData[i][ 1 ] = total
92 toId = total - 1 ;
93 } else {
94 shortData[i][ 1 ] = thisstep;
95 fromId = thisstep;
96 toId = thisstep - 1 ;
97 }
98 move(thisid,{left:{from:info[fromId].posX,to:info[toId].posX},top:{from:info[fromId].posY,to:info[toId].posY},width:{from:info[fromId].scaleX,to:info[toId].scaleX},height:{from:info[fromId].scaleY,to:info[toId].scaleY}}, 20 , 5 );
99 }
100 mysort( 1 );
101 }
102 // 运动效果
103 function move(id,toSize,detay,size){
104 window.setTimeout( function (){
105 // 开始移动
106 $(id).style.width = toSize.width.from + (toSize.width.to - toSize.width.from) * (size / 100)+'px';
107 $(id).style.height = toSize.height.from + (toSize.height.to - toSize.height.from) * (size / 100)+'px';
108 $(id).style.left = toSize.left.from + (toSize.left.to - toSize.left.from) * (size / 100)+'px';
109 $(id).style.top = toSize.top.from + (toSize.top.to - toSize.top.from) * (size / 100)+'px';
110 if (size >= 100 ) return false ;
111 size += 5 ;
112 move(id,toSize,detay,size);
113
114 },detay);
115 }
116 // 初始化
117 resetInfo(info)
118 var m = setInterval(movethis, 5000 );
119 </ script >
120 </ body >
121 </ html >
2 < html xmlns ="http://www.w3.org/1999/xhtml" >
3 < head >
4 < meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />
5 < title > Move Demo </ title >
6 < style type ="text/css" >
7 .move { position : absolute ; line-height : 100% ; text-align : center ; border : #66F dashed 1px ; overflow : hidden ; }
8 </ style >
9 </ head >
10 < body >
11 < div style ="margin-top:120px; position:relative;" >
12 < div id ="move1" class ="move" > Move Demo1 </ div >
13 < div id ="move2" class ="move" > Move Demo2 </ div >
14 < div id ="move3" class ="move" > Move Demo3 </ div >
15 < div id ="move4" class ="move" > Move Demo4 </ div >
16 < div id ="move5" class ="move" > Move Demo5 </ div >
17 </ div >
18
19 < script type ="text/javascript" >
20 // 获取对象
21 function $() {
22 var elements = new Array();
23 for ( var i = 0 ; i < arguments.length; i ++ ) {
24 var element = arguments[i];
25 if ( typeof element == ' string ' )
26 element = document.getElementById(element);
27 if (arguments.length == 1 )
28 return element;
29 elements.push(element);
30 }
31 return elements;
32 }
33 // 初始化变量
34 var info = [
35 {id: ' move1 ' ,step: 1 ,index: 1 ,posX: 0 ,posY: 0 ,scaleX: 0 ,scaleY: 0 },
36 {id: ' move2 ' ,step: 2 ,index: 2 ,posX: 0 ,posY: 0 ,scaleX: 0 ,scaleY: 0 },
37 {id: ' move3 ' ,step: 3 ,index: 3 ,posX: 0 ,posY: 0 ,scaleX: 0 ,scaleY: 0 },
38 {id: ' move4 ' ,step: 4 ,index: 4 ,posX: 0 ,posY: 0 ,scaleX: 0 ,scaleY: 0 },
39 {id: ' move5 ' ,step: 5 ,index: 5 ,posX: 0 ,posY: 0 ,scaleX: 0 ,scaleY: 0 }
40 ];
41 var shortData = [];
42 // 排序
43 function _sort(a,b){
44 return a[col] - b[col];
45 }
46 function mysort(i){
47 col = i;
48 shortData = shortData.sort(_sort);
49 }
50 // 定义全局变量
51 var moveTime = {};
52 var MaxSizeW = 200 ;
53 var MaxSizeH = 200 ;
54 var total = info.length;
55 var centerI = Math.round(total / 2);
56 // 获取宽度
57 function getPxy(step){
58 var pw = 0 ;
59 for ( var i = 1 ;i < step;i ++ ){
60 pw += info[i - 1 ].scaleX;
61 }
62 return pw;
63 }
64 // 设置初始位置
65 function resetInfo(info){
66 for ( var i = 0 ;i < total;i ++ ){
67 var obj = info[i];
68 obj.index = (obj.step > centerI) ? centerI - (obj.step - centerI):obj.step;
69 obj.scaleX = MaxSizeW * (obj.index / total)*2;
70 obj.scaleY = MaxSizeH * (obj.index / total)*2;
71 obj.posX = 30 * (obj.step - 1 ) + getPxy(obj.step);
72 obj.posY = MaxSizeH - obj.scaleY;
73 shortData.push([obj.id,obj.step]);
74 }
75 for ( var i = 0 ;i < total;i ++ ){
76 $(info[i].id).style.top = info[i].posY + ' px ' ;
77 $(info[i].id).style.left = info[i].posX + ' px ' ;
78 $(info[i].id).style.width = info[i].scaleX + ' px ' ;
79 $(info[i].id).style.height = info[i].scaleY + ' px ' ;
80 }
81 }
82 // 移动元素
83 function movethis(){
84 var fromId,toId;
85 for ( var i = 0 ;i < shortData.length;i ++ ){
86 var thisstep = shortData[i][ 1 ];
87 var thisid = shortData[i][ 0 ];
88 -- thisstep;
89 if (thisstep == 0 ){
90 fromId = thisstep;
91 shortData[i][ 1 ] = total
92 toId = total - 1 ;
93 } else {
94 shortData[i][ 1 ] = thisstep;
95 fromId = thisstep;
96 toId = thisstep - 1 ;
97 }
98 move(thisid,{left:{from:info[fromId].posX,to:info[toId].posX},top:{from:info[fromId].posY,to:info[toId].posY},width:{from:info[fromId].scaleX,to:info[toId].scaleX},height:{from:info[fromId].scaleY,to:info[toId].scaleY}}, 20 , 5 );
99 }
100 mysort( 1 );
101 }
102 // 运动效果
103 function move(id,toSize,detay,size){
104 window.setTimeout( function (){
105 // 开始移动
106 $(id).style.width = toSize.width.from + (toSize.width.to - toSize.width.from) * (size / 100)+'px';
107 $(id).style.height = toSize.height.from + (toSize.height.to - toSize.height.from) * (size / 100)+'px';
108 $(id).style.left = toSize.left.from + (toSize.left.to - toSize.left.from) * (size / 100)+'px';
109 $(id).style.top = toSize.top.from + (toSize.top.to - toSize.top.from) * (size / 100)+'px';
110 if (size >= 100 ) return false ;
111 size += 5 ;
112 move(id,toSize,detay,size);
113
114 },detay);
115 }
116 // 初始化
117 resetInfo(info)
118 var m = setInterval(movethis, 5000 );
119 </ script >
120 </ body >
121 </ html >