왜 이러한 목록 항목이 올바르게 배치되지 않습니까?

Question

자바에서 원형 메뉴를 만들고 절대 위치 지정과 -webkit-transforms 조합을 사용하여 목록 항목을 원의 바깥쪽에 배치했습니다. 여기

는 JSFiddle에 대한 모양으로 해킹 된 데모입니다 : http://jsfiddle.net/5XnKZ/6/

당신은 목록 항목의 배치가 느슨하게 원형이라고 볼 수 있지만 순서대로 또는 동일한 폭이 표시되지 않습니다 그 사이에 나는 기대하고 있었다. 목록에서 항목을 추가하고 제거하면 목록 항목의 수에 따라 표시 방법에 큰 영향을 미치게됩니다.

절대 위치 지정을 사용하여 원의 중심에 항목을 배치 한 다음 웹킷 변환을 사용하여 항목을 원의 위치로 변환합니다. 변환에 대한 x와 y는 다음과 같이 얻어진다 :

d는 항목에 있어야 라디안의 각도이며, r은 I 그들에 위치하고있는 원의 반경

var x = Math.cos(d) * r; 
var y = Math.sin(d) * r; 

.

누가 잘못 될지 알 수 있습니까?

Answer 1

색인이 올바르게 계산되지 않았습니다.

(function() { 
    //A foreach alternative function 
    var each = function(a, b) { 
     for (var i = 0; i < a.length; i++) { 
      b(a[i]); 
     } 
    }; 

    //Get an array of all the circlr elements 
    var circles = document.getElementsByClassName('circle'); 
    //Iterate over these elements 
    each(circles, function(circle) { 
     //For each of their children 
     var i = 0; 
     each(circle.children, function(child) { 
      //Get child's index as a percentage of 2 PI radian 
      var p = (i)/circle.children.length * (2*Math.PI); 
      var r = 80; 
      child.style.webkitTransform = 'translatey(' + Math.sin(p) * r + 'px) translatex(' + Math.cos(p) * r + 'px)'; 
      i++; 
     }); 
    }); 
})(); 

corrected JsFiddle을 확인하십시오.