위치 지점 주위

페이지 (x, y)에 중심점이 있고 그 지점 주위로 다양한 수의 항목 (div 's)을 원으로 균등하게 분배해야합니다. 중심점으로부터의 거리가 고정됩니다.위치 지점 주위

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

"작동하지 않음">. < –

죄송합니다. 바이올린을 업데이트했습니다. – addedlovely

어떻게 작동하지 않습니까? 그것이 무엇인지 /하지 않고있는 것에 대한 더 많은 설명은 도움이 될 것입니다. 얼마나 많은 요소가 있습니까? 만약 당신이 디버그, 앵글로 시작하는 무엇입니까? 나는 당신이 float 수학을 사용하지 않는다면 볼 수 있습니다, 당신은 angle = 0으로 끝날 것이고 나머지 수학은 즉시 중단됩니다. –

Math.sin 및 Math.cos 각도가 라디안 (deg)이 아닌 라디안 단위 여야합니다. 전달하기 전에 각도를 라디안으로 변환해야합니다.

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

출처

2012-03-05 22:39:07 bfavaretto

아 완벽한. 감사. – addedlovely

@addedlovely는'.02'의 목적이 아닙니까? 좀 더 정확하게 ...'0.0175'가 작동해야합니다. – paislee

이

<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

죄송합니다. 몇 가지 변경되었습니다. –

근사값은 PI = 3.6입니다.

변경 그것을 : div의 동그라미 :) 인 경우

$('div').each(function(index) { 
angle = ((3.1415926535897932384626433832795 * 2)/noElements)*index; 

$(this).css({'left': offset + (Math.sin(angle) * xDistance), 
    'top': offset + (Math.cos(angle) * xDistance)}); 
    });

더 둥근 모양겠습니까

출처

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

위치 지점 주위

답변

관련 문제