javascript – 为什么这个圆圈不能围绕正确的中心旋转?

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';

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/

上一篇:Linux 命令:grub2-mkconfig


下一篇:Azure Virtual Network (19) 设置NSG流日志,查看Azure虚拟机内网和公网流量