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>js-圆周运动</title> 6 <style type="text/css"> 7 body,div,ul,li,h4,p{margin:0;padding:0;} 8 #box{ position:relative; width:800px; height:800px; margin:0 auto]} 9 #box img{ position:absolute; word-break:break-all; top:310px; left:260px} 10 </style> 11 <script type="text/javascript"> 12 window.onload=function(){ 13 14 var oBox=document.getElementById("box"); 15 var oImg=oBox.getElementsByTagName("img"); 16 var ind=1; 17 18 19 //var timer=setInterval(move,30); 20 21 22 for(var i=0;i<oImg.length;i++){ 23 oImg[i].index=i*360/oImg.length; 24 var l=300+300*Math.sin(oImg[i].index*Math.PI/180); 25 var t=300-300*Math.cos(oImg[i].index*Math.PI/180); 26 27 28 29 30 startMove(oImg[i], {left:parseInt(l),top:parseInt(t)},function(){ 31 32 for(var i=0;i<oImg.length;i++){ 33 34 oImg[i].style.left=300+300*Math.sin(oImg[i].index*Math.PI/180)+"px"; 35 oImg[i].style.top=300-300*Math.cos(oImg[i].index*Math.PI/180)+"px"; 36 37 } 38 39 setInterval(move,100); 40 41 }) 42 43 } 44 45 function move(){ 46 47 for(var i=0;i<oImg.length;i++){ 48 49 oImg[i].style.left=300+300*Math.sin(oImg[i].index*Math.PI/180)+"px"; 50 oImg[i].style.top=300-300*Math.cos(oImg[i].index*Math.PI/180)*0.1+"px"; 51 52 oImg[i].index+=ind; 53 54 55 } 56 57 } 58 59 60 function getStyle(obj, name) 61 { 62 if(obj.currentStyle) 63 { 64 return obj.currentStyle[name]; 65 } 66 else 67 { 68 return getComputedStyle(obj, false)[name]; 69 } 70 } 71 72 function startMove(obj, json, fnEnd) 73 { 74 clearInterval(obj.timer); 75 obj.timer=setInterval(function (){ 76 var bStop=true; //假设：所有值都已经到了 77 78 for(var attr in json) 79 { 80 var cur=0; 81 82 if(attr=='opacity') 83 { 84 cur=Math.round(parseFloat(getStyle(obj, attr))*100); 85 } 86 else 87 { 88 cur=parseInt(getStyle(obj, attr)); 89 } 90 91 var speed=(json[attr]-cur)/6; 92 speed=speed>0?Math.ceil(speed):Math.floor(speed); 93 94 if(cur!=json[attr]) 95 bStop=false; 96 97 if(attr=='opacity') 98 { 99 obj.style.filter='alpha(opacity:'+(cur+speed)+')'; 100 obj.style.opacity=(cur+speed)/100; 101 } 102 else 103 { 104 obj.style[attr]=cur+speed+'px'; 105 } 106 } 107 108 if(bStop) 109 { 110 clearInterval(obj.timer); 111 112 if(fnEnd)fnEnd(); 113 } 114 }, 90); 115 } 116 138 139 } 140 141 </script> 142 </head> 143 <body> 144 <div id="box"> 145 <img src="images/1.jpeg" width="150" height="200" /> 146 <img src="images/2.jpeg" width="150" height="200" /> 147 <img src="images/3.jpeg" width="150" height="200" /> 148 <img src="images/4.jpeg" width="150" height="200" /> 149 <img src="images/5.jpeg" width="150" height="200" /> 150 151 152 153 </div> 154 </body> 155 </html>