Question

我在页面上有一个中心点（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)});
});

这是fiddle中的代码。

这不太合适，如果你在小提琴中添加更多div，你会偶尔看到div不均匀分布。例如，具有8个元素，导致底部的两个重叠。

Answer 1

Math.sin和Math.cos期望以弧度表示角度，而不是降低角度。您必须在传递之前将角度转换为弧度：

var radians = degrees * (Math.PI/180);

Answer 2

用

封闭你的DIV

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

（你忘了#container元素）。但请确保将其从each()中排除（例如，您可以为所有其他DIV提供一些CSS类并将其用作$("div.myclass")）。

Answer 3

您使用的是近似值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是圈子，会看起来更圆：）

Answer 4

很抱歉没有写出完整的例子，但我现在没有太多时间。

在源代码的顶部，您需要以下内容：

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

在你的foreach循环的css设置......

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

在每个循环结束时：

currentAngle += incrementingAngle;

围绕一点的位置

4 个答案: