Положение вокруг точки - PullRequest
Новая
       6

Положение вокруг точки

0 голосов
/ 06 марта 2012

У меня есть центральная точка на странице (x, y), и мне нужно равномерно распределить различное количество элементов (div) вокруг этой точки в круге. Расстояние от центральной точки будет фиксированным.

Пока это мой код: 

var noElements = $('div').size();
var xDistance = 100;
var angle = 0;
var offset = 250;

$('div').each(function(index) {
    angle = (360 / noElements)*index;

    $(this).css({'left': offset + (Math.sin(angle) * xDistance), 'top': offset + (Math.cos(angle) * xDistance)});
});​

Это код в скрипке .

Это не совсем работает, если вы добавите больше div в скрипку, вы увидите, что иногда div не распределяются равномерно. Например, наличие 8 элементов приводит к перекрытию двух нижних элементов.

Ответы [ 4 ]

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

Math.sin и Math.cos ожидают угол в радианах, а не градус.Вы должны преобразовать ваши углы в радианы перед прохождением: 

var radians = degrees * (Math.PI/180);
0 голосов
/ 06 марта 2012

Извините, что не выписал полный пример, но у меня сейчас не так много времени.

В верхней части вашего источника вам понадобятся следующие данные: 

var radToDeg = Math.PI / 180;
var incrementingAngle = 360 / noElements;
var currentAngle = 0;

И в настройках css вашего цикла foreach ... 

left: Math.sin(currentAngle * radToDeg),
top: Math.cos(currentAngle * radToDeg)

И в конце каждого цикла: 

currentAngle += incrementingAngle;
0 голосов
/ 06 марта 2012

Вы используете приближение PI = 3,6.

Измените его на: 

$('div').each(function(index) {
angle = ((3.1415926535897932384626433832795 * 2) / noElements)*index;

$(this).css({'left': offset + (Math.sin(angle) * xDistance), 
  'top': offset + (Math.cos(angle) * xDistance)});
  });

Выглядело бы более круглым, если бы div были кругами:)

0 голосов
/ 06 марта 2012

Заключите ваши DIV с помощью 

<div id="container" style="position: absolute; top: 200px; left: 200px">
...
</div>

(вы забыли элемент #container).Но убедитесь, что вы исключили его из each() (например, вы можете присвоить всем другим DIV некоторый класс CSS и использовать его как $("div.myclass")).

...