0

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

谁能看到出了什么问题？

4

1 回答 1

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

检查更正后的 JsFiddle。

于 2012-04-12T13:06:55.970 回答