围绕一个点的位置

我在页面（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个元素，导致底部的两个重叠。

来源

2012-03-05 addedlovely

“not working”>。< – 2012-03-05 22:33:10

对不起，只是更新了小提琴。 – addedlovely 2012-03-05 22:33:59

它怎么不起作用？关于它是/不在做的更多描述将会有所帮助。有多少元素？如果你调试，什么角度出发？我可以看到，如果你没有在那里使用浮点数学，你会以角度= 0结束，并且数学的其余部分立即崩溃了？ – 2012-03-05 22:34:01

Math.sin and Math.cos预计以弧度表示的角度，而不是递减。您必须在通过之前将角度转换为弧度：

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

来源

2012-03-05 22:39:07 bfavaretto

啊完美。谢谢。 – addedlovely 2012-03-05 22:42:03

@addedlovely是不是'.02'的用途？只是让它更精确..'0.0175'应该可以工作 – paislee 2012-03-05 22:46:05

与

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

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

来源

2012-03-05 22:36:42

看到评论+更新小提琴 – paislee 2012-03-05 22:38:36

哎呀，有些事情已经改变 – 2012-03-05 22:40:49

您正在使用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的是圆:)

来源

2012-03-05 22:42:36

对不起，不写了一个完整的例子，但我不会在有很多的时间时刻。

在源代码的顶部，你需要这些：

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;

来源

2012-03-05 22:44:11 Jake

围绕一个点的位置

回答

相关问题