Jsfiddle:http://jsfiddle.net/yJJs7/
使用Javascript:
function main(){
var centerx=250;
var centery=250;
var degrees=0;
var div=document.getElementById('test');
var move=function(){
if(degrees>360)degrees=degrees%360;
var radians = degrees*Math.PI/180;
var newx = Math.cos(radians)*100;
var newy = Math.sin(radians)*100;
div.style.top=(newy+centery)+'px';
div.style.left=(newx+centerx)+'px';
degrees+=10;
};
setInterval(move,50);
console.log(div);
}
main();
HTML:
<div id="test"></div>
<div id="test2"></div>
CSS:
#test{
height:100px;
width:100px;
background:black;
border-radius:100px;
position:fixed;
}
#test2{
position:fixed;
height:30px;
width:30px;
background:black;
border-radius:30px;
position:fixed;
top:250px;
left:250px;
}
第二个div以250×250像素为中心,第一个div应围绕它旋转.为什么不呢?
解决方法:
你的等式计算圆心的新位置,但是style.top/style.left从圆的最高/最左边点开始,你需要减去半径:
div.style.top=(ny+cy-35)+'px';
div.style.left=(nx+cx-35)+'px';
那将围绕小圆圈的中心(265,265)而不是(250,250)旋转,所以你可能想要偏移css中的小圆圈:
#test2{
...
top:235px;
left:235px;
}
div.style.top=(ny+cy-50)+'px';
div.style.left=(nx+cx-50)+'px';