为什么这些列表项的位置不正确

Why don't these list items position correctly?

本文关键字：位置 不正确 列表 为什么      更新时间：2023-09-26

我正在用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 是我将它们放置在的圆的半径。

谁能看到出了什么问题？

您的指数计算不正确。

(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++;
        });
    });
})();

检查更正的 JsFiddle。

相关文章：