Question

使用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/

Answer 2

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style>
    #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;
    }
    </style>
    <script type="text/javascript" src="jquery.js"></script>
    <script>
    $(document).ready(function (e) {
        main(100);
    });

    function main(distance) {

        var $this = $("#test2");
        var offset = $this.offset();
        var width = $this.width();
        var height = $this.height();

        var cx = offset.left + width / 2;
        var cy = offset.top + height / 2;

        var i = 0;
        var $div = $('#test');
        var divOffset = $div.offset();
        var divWidth = $div.width();
        var divHeight = $div.height();

        var move = function () {
            if (i > 360) i = i % 360;
            var j = i * Math.PI / 180;
            var nx = Math.cos(j) * distance;
            var ny = Math.sin(j) * distance;
            var left = nx + cx - divWidth / 2
            var top = ny + cy - divHeight / 2

            $div.offset({
                top: top,
                left: left
            });

            i += 10;
        };

        setInterval(move, 50);

    }
    </script>
</head>

<body>
    <div id="test"></div>
    <div id="test2"></div>
</body>

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

2 个答案: