<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="智能社 - zhinengshe.com" /> <meta name="copyright" content="智能社 - zhinengshe.com" /> <title>智能社 - www.zhinengshe.com</title> <style> #div1{ position:relative;300px; height:300px; border:1px solid #000; border-radius:50%; margin:50px auto;} #div1 span{ position:absolute;left:50%;top:0; margin:-15px;30px; height:30px; background:red;border-radius:50%;} </style> <script> //角度转弧度 function a2d(a){ return a*Math.PI/180; } window.onload = function(){ var oDiv = document.getElementById("div1"); var R = oDiv.offsetWidth/2; console.log(R); var N = 8; var aSpan = []; for(var i = 0; i < N; i++){ var oSpan = document.createElement("span"); aSpan.push(oSpan); oDiv.appendChild(oSpan); } for(var i = 0; i < N; i++){ var a = 360/N*i; move(aSpan[i],a); } function move(obj,iTarget){ var start = 0; var dis = iTarget - start; var time = 1000; var count = Math.round(time/30); var n = 0; clearInterval(obj.timer); obj.timer = setInterval(function(){ n++; var cur = start + dis/count*n; obj.style.left = R + Math.sin(a2d(cur))*R + "px"; obj.style.top = R - Math.cos(a2d(cur))*R + "px"; if(n == count){ clearInterval(obj.timer); } },30); } }; </script> </head> <body> <div id="div1"> </div> </body> </html>
