javascript - 为什么这个圆没有围绕正确的中心旋转？

Question

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 以 250x250 像素为中心，第一个 div 应围绕它旋转。为什么不是呢？

Answer 1

你的等式正在计算圆心的新位置，但是 style.top/style.left 从圆的顶部/最左边的点出发，你需要减去半径:

div.style.top=(ny+cy-35)+'px';
div.style.left=(nx+cx-35)+'px';

http://jsfiddle.net/yJJs7/1/

---

虽然这将围绕小圆 (265, 265) 的中心旋转而不是 (250, 250)，因此您可能想要在 css 中偏移小圆:

#test2{
    ...
    top:235px;
    left:235px;
}

div.style.top=(ny+cy-50)+'px';
div.style.left=(nx+cx-50)+'px';

http://jsfiddle.net/yJJs7/7/