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 に答える