Позиция элементов DIV в круге

Мне нужно поместить эти 5 элементов в круг. И мои знания о тригонометрии слишком бедны, чтобы придумать решение.Позиция элементов DIV в круге

http://jsbin.com/acOSeTE/1/edit

Кто помогает, пожалуйста, дать некоторые пояснения по математике формулы или направить меня в связи с информацией о нем.

Мне не нужно решение jQuery, так как я хочу узнать, что находится за рамками.

Спасибо.

источник

2013-09-13 Henry Lynx

Всегда включайте соответствующий код * в вопросе сам *, не просто ссылку (даже не на jsbin). Прямая ссылка вроде этого - приятное дополнение *. –

Как вы можете позиционировать что-либо без CSS? –

Ну, это еще css, но только истинный JavaScript, как вы можете видеть, я дал div.style.position и т. Д. Мне нужно, чтобы это было сделано с помощью JavaScript. –

Вам почти наверняка понадобится CSS для позиционирования div с такой точностью.

Общая формула вы ищете, что для любого заданного радиан позиции на окружности (есть 2П радиан в окружности), то x и y являются:

x = originX + (Math.cos(radians) * radius); 
y = originY + (Math.sin(radians) * radius);

Пример: Live Copy | Live Source

CSS (вы можете использовать встроенные стили, я полагаю):

#target { 
    position: absolute; 
    border: 1px solid black; 
    width: 1px; 
    height: 1px; 
}

HTML:

<input type="button" id="theButton" value="Start/Stop"> 
<div id="target"></div>

JavaScript:

(function() { 
    var radians, maxRadians, target, radius, originX, originY, inc, timer; 

    radius = 50; 
    originX = 100; 
    originY = 100; 

    radians = 0; 
    maxRadians = 2 * Math.PI; 
    inc = 10/360; 
    target = document.getElementById("target"); 
    positionTarget(); 

    function positionTarget() { 
    var x, y; 

    x = originX + (Math.cos(radians) * radius); 
    y = originY + (Math.sin(radians) * radius); 
    console.log(x + "," + y); 
    target.style.left = x + "px"; 
    target.style.top = y + "px"; 
    radians += inc; 
    if (radians > maxRadians) { 
     radians -= maxRadians; 
    } 
    timer = setTimeout(positionTarget, 30); 
    } 

    document.getElementById("theButton").onclick = function() { 
    if (timer) { 
     clearTimeout(timer); 
     timer = 0; 
    } 
    else { 
     timer = setTimeout(positionTarget, 30); 
    } 
    }; 
})();

источник

2013-09-13 08:36:34

Позиция элементов DIV в круге

ответ

Смежные вопросы