Почему этот круг не вращается вокруг правильного центра? - PullRequest
Новая
       15

Почему этот круг не вращается вокруг правильного центра?

3 голосов
/ 03 марта 2012

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 px, и первый div должен вращаться вокруг него.Почему не так?

Ответы [ 2 ]

7 голосов
/ 03 марта 2012

Ваше уравнение вычисляет новую позицию для центра круга, но 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/

0 голосов
/ 25 октября 2012 

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...