一个Js图片展示效果
一个流产的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>
