Я ищу функцию, чтобы упорядочить некоторые элементы вокруг круга.
результат должен выглядеть примерно так:
Я ищу функцию, чтобы упорядочить некоторые элементы вокруг круга.
результат должен выглядеть примерно так:
Вот код, который должен вам помочь:
var numElements = 4,
angle = 0
step = (2*Math.PI) / numElements;
for(var i = 0; i < numElements.length; i++) {
var x = container_width/2 + radius * Math.cos(angle);
var y = container_height/2 + radius * Math.sin(angle);
angle += step;
}
Это не полно, но должно хорошо начать.
Обновление: здесь что-то действительно работает:
var radius = 200; // radius of the circle
var fields = $('.field'),
container = $('#container'),
width = container.width(),
height = container.height(),
angle = 0,
step = (2*Math.PI) / fields.length;
fields.each(function() {
var x = Math.round(width/2 + radius * Math.cos(angle) - $(this).width()/2),
y = Math.round(height/2 + radius * Math.sin(angle) - $(this).height()/2);
$(this).css({
left: x + 'px',
top: y + 'px'
});
angle += step;
});
Демо: http://jsfiddle.net/ThiefMaster/LPh33/
Здесь улучшенная версия, где вы можете изменить количество элементов.
Для элемента вокруг центра в точке (x, y), расстояния r, центр элемента должен быть расположен по адресу:
(x + r cos(2kπ/n), y + r sin(2kπ/n))
где n - количество элементов, а k - это "число" элемента, который вы сейчас позиционируете (от 1 до n включительно).
Я объединил скрипт ThiefMaster с плагином jQuery pointAt:
Демо: http://jsfiddle.net/BananaAcid/nytN6/
the code is somewhat like above.
might be interesting to some of you.
Я изменил скрипт ThiefMaster, чтобы автоматически распределять div вокруг круга с радиусом равным ширине /2 контейнера div:
<div class="circle-distribute-container">
<div class="circle-element">one</div>
<div class="circle-element">two</div>
<div class="circle-element">three</div>
<div class="circle-element">four</div>
<div class="circle-element">five</div>
</div>
<div class="circle-distribute-container">
<div class="circle-element">another one</div>
<div class="circle-element">another two</div>
<div class="circle-element">another three</div>
<div class="circle-element">another four</div>
</div>
См. ссылка