js实战之-圆周运动 

  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>

 

posted @ 2013-07-18 10:19  梦飞无颜  阅读(512)  评论(0)    收藏  举报