围绕圆圈动态排列一些元素

Question

我正在寻找一个函数来围绕一个圆圈排列一些元素.
结果应该是这样的:

Answer 1

以下是一些可以帮助您的代码:

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/
这是一个改进版本,您可以在其中更改元素数量.

Answer 2

对于围绕中心的元素(x,y),距离r,元素的中心应位于:

(x + r cos(2k?/n), y + r sin(2k?/n))

其中n是元素的数量,k是您当前定位的元素的"数字"(在1和n之间).

Answer 3

我将ThiefMaster的小提琴与jQuery pointAt插件结合起来:

演示:http://jsfiddle.net/BananaAcid/nytN6/

the code is somewhat like above.
might be interesting to some of you.