为什么这些列表项目没有正确定位？

我正在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

为什么这些列表项目没有正确定位？

回答

相关问题