Question

我在Javascript中创建一个循环菜单，并决定使用绝对定位和-webkit-transforms的组合来将列表项定位在圆的外部。

这是一个针对JSFiddle的攻击形状的演示：http://jsfiddle.net/5XnKZ/6/

您可以看到列表项的位置是松散的圆形，但它们不是按顺序出现，也不是我期望的宽度相等。如果您尝试添加和删除列表中的项目，您将看到不同数量的列表项对它们的显示方式产生了截然不同的影响。

我使用绝对定位将项目放置在圆心中，然后使用webkit变换将它们转换为圆圈上的位置。变换的x和y如下所示：

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

其中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。

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

1 个答案: