爲什麼這些列表項目沒有正確定位？

我正在Javascript中創建一個圓形菜單，並決定使用絕對定位和-webkit轉換的組合來定位列表項目的外圍。爲什麼這些列表項目沒有正確定位？

這裏是已侵入形狀的的jsfiddle演示：http://jsfiddle.net/5XnKZ/6/

您可以看到列表中的項目位置是鬆散的圓形，但它們不會出現在順序或與相等寬度之間我期待。如果您嘗試添加和刪除列表中的項目，您將看到不同數量的列表項目對它們的顯示方式有着截然不同的影響。

我定位的項目與絕對定位的圓的中心，然後將其翻譯爲自己與WebKit的變換圓位置。用於變換x和y得到這樣的：

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

其中d是弧度，該項目應在角度，和r是我將它們定位在圓的半徑。

有人能看到什麼錯誤？

來源

2012-04-12 Dan Prince

爲什麼你不把它們直接放在他們正確的座標上。不需要先將它們定位在中間，然後再次進行轉換。 – 2012-04-12 13:07:46

默認情況下，它們應該在原點處，並且在某些事件時它們將移動到它們在圓上的位置。我不想用絕對位置座標和修改來保留對它們的原點的引用，而更願意使用變換來進行翻譯。 – 2012-04-12 13:15:35

你的指數是不計算正確。

(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。

來源

2012-04-12 13:06:55

愚蠢的錯誤...有時你只是看不到它們。乾杯! – 2012-04-12 13:15:05

爲什麼這些列表項目沒有正確定位？

回答

相關問題