圍繞一個點的位置

我在頁面（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

圍繞一個點的位置

回答

相關問題