Ordnen Sie einige Elemente dynamisch um einen Kreis an

Ich bin auf der Suche nach einer Funktion zu veranlassen einige Elemente um Sie herum einen Kreis.
Ergebnis sollte so etwas wie :

Ordnen Sie einige Elemente dynamisch um einen Kreis an

InformationsquelleAutor der Frage Omid | 2012-04-14

  1. 64

    Hier ist etwas code, der dir helfen sollte:

    var numElements = 4,
    angle = 0
    step = (2*Math.PI) / numElements;
for(var i = 0; i < numElements.length; i++) {
    var x = container_width/2 + radius * Math.cos(angle);
    var y = container_height/2 + radius * Math.sin(angle);
    angle += step;
}

    Es ist nicht abgeschlossen, sondern sollte Ihnen einen guten start.

    Update: Hier ist etwas, das tatsächlich funktioniert:

    var radius = 200; //radius of the circle
var fields = $('.field'),
    container = $('#container'),
    width = container.width(),
    height = container.height(),
    angle = 0,
    step = (2*Math.PI) / fields.length;
fields.each(function() {
    var x = Math.round(width/2 + radius * Math.cos(angle) - $(this).width()/2),
        y = Math.round(height/2 + radius * Math.sin(angle) - $(this).height()/2);
    $(this).css({
        left: x + 'px',
        top: y + 'px'
    });
    angle += step;
});

    Demo: http://jsfiddle.net/ThiefMaster/LPh33/

    Hier ist ein verbesserte version, wo können Sie das element zählen.

    InformationsquelleAutor der Antwort ThiefMaster

  2. 11

    Für ein element um ein Zentrum (xy), Entfernung rdas element entfernt positioniert werden soll, an:

    (x + r cos(2kπ/n), y + r sin(2kπ/n))

    wo n wird die Anzahl der Elemente, und k ist die "Nummer" des Elements, dem Sie gerade Positionierung (zwischen 1 und n inklusive).

    InformationsquelleAutor der Antwort Delan Azabani

  3. 5

    Habe ich kombiniert ThiefMaster ist man mit der jQuery-pointAt plugin:

    Demo: http://jsfiddle.net/BananaAcid/nytN6/

    the code is somewhat like above.
might be interesting to some of you.

    InformationsquelleAutor der Antwort BananaAcid

  4. 0

    Anordnung Von Elementen Im Kreis (Javascript)

    function arrangeElementsInCircle (elements, x, y, r) {
    for (var i = 0; i < elements.length; i++) {
        elements[i].scaleX = 1 / elements.length
        elements[i].scaleY = 1 / elements.length
        elements[i].x = (x + r * Math.cos((2 * Math.PI) * i/elements.length))
        elements[i].y = (y + r * Math.sin((2 * Math.PI) * i/store.length))
    }
}

    Wo x,y ist der Punkt-Koordinaten und elements ist array-Elemente platziert werden und r ist radius.

    InformationsquelleAutor der Antwort Amit Kumar Khare

Schreibe einen Kommentar