Circular Dock/Menü in Css oder Jquery

Question

Ist es möglich, ein kreisförmiges Menü oder Dock mit CSS oder Jquery zu haben.
Ich habe eine Reihe von Bildern als die Dock-Elemente, die als kreisförmige Dock angezeigt werden müssen ... aber die Anzahl der Elemente im Dock sind nicht konstant und können variieren .... so kann ich nicht dazu neigen, konstante Werte zu verwenden um jeden Gegenstand in einer vordefinierten Weise zu positionieren. Ajax lädt einige Bilder in dieses spezielle div und ich muss CSS oder JQuery verwenden, um dies zu formatieren, so dass sie als kreisförmige Dock-Elemente angezeigt werden. Irgendeine Idee, wie dies umgesetzt werden kann?
würde ich einen Browser in spezifischer Implementierung mag, aber ich begrüße auch, wenn jemand einige Lösungen speziell für wenige Browser hat ...

UPDATE
Ich glaube nicht genau ich ein Kreismenü. .. es wird leicht durcheinander gebracht, wenn die Anzahl der Dock-Elemente zunimmt. Ich suche ein Spiral Dock. und durch Spiral i bedeuten, dass die Menüpunkte in der folgenden Ausrichtung sein muss ..

Answer 1

Ich habe es, denke ich! Dies ist nur ein Grundkonzept, also passe es bitte selbst an.

http://www.mathematische-basteleien.de/spiral.htm#Spirals%20by%20polar%20equations

Siehe folgende JSFiddle und den Code unten:

var items = 10; 
var a = 20; 
var b = 1; // updated an extra b, used for rate (see update section below) 
var centerX = $('.content').innerWidth()/2; // and some adjustment of half its own size 
var centerY = $('.content').innerHeight()/2; 
for(var i = 0; i < items; i++) 
{ 
    var yPos = a * i * Math.cos(b*i) + centerY; 
    var xPos = a * i * Math.sin(b*i) + centerX; 
    var item = '<div class="item" style="top:' + yPos + 'px; left:' + xPos + 'px;" />'; 
    $('.content').append(item); 
} 

und einige CSS zu Testzwecken:

.item 
{ 
    width:10px; 
    height:10px; 
    position: absolute; 
    background-color:red; 
} 

.content 
{ 
    position:relative; 
    height:300px; 
    width:300px; 
    background-color:green; 
} 

<div class="content"> 
</div> 

Update: Antwort auf den Kommentar

Die Funktion für yPos und xPos erzeugt Objekte nach außen, sie beginnen vom Mittelpunkt aus. Durch die Definition einer anderen a und eine zusätzliche var b innerhalb der Math.cos(b*i). Es ist möglich, die Rate der angezeigten Divs und die Verteilung der gesamten Spirale zu ändern. Die Ausbreitung der Spirale ist definiert durch a, weil sie die Amplitude definiert. Die Rate, mit der divs angezeigt werden, wird durch das neue b definiert.

Also eine kleinere b bedeutet niedrigere Winkel, bedeutet näher zusammen auf der Spirale. Eine kleinere a bedeutet niedrigere Amplitude, bedeutet näher zusammen in x-und y-Achsen.

Wenn die Anzahl der Bilder nicht vorhersehbar ist, sollte es keine Rolle spielen, weil die Spirale ausgeht. Natürlich werden Sie dadurch Probleme bekommen, wenn Sie zu viel hinzufügen.

Eine andere Lösung ist dies nur in PHP, weil es nichts dynamisches zu tun hat, also können Sie dies bereits in Ihrem Backend tun. Das könnte das gleiche mit dem Forloop und allen sein, aber dann mit dem Ausdruck von Anweisungen in Ihrem PHP.

Answer 2

Auch wenn Sie nicht ein Kreismenü festlegen wollen, vielleicht my code kann von Nutzen sein (oder einer der ursprünglichen Links). Die Position der Artikel wird berechnet, sodass Sie sich keine Gedanken über Hinzufügen/Entfernen machen müssen.

Answer 3

könnte dies von Interesse sein? http://www.wizzud.com/jqDock/

Answer 4

Ich glaube, Sie so etwas wie http://snipplr.com/view/43352/jquery-plugin-spiral-animations/

Versuch ersetzt die belebte Funktion im Plugin mit einem einfachen
CSS- ({ 'margin-left' verwenden: x, 'margin-top': y })

die mathematischen Operationen sind bereits da, Sie müssen nur die animierte in einer statischen Position (gibt einen anderen Offset für jedes Element im Menü)
Sorry, ich hatte keine Zeit, etwas Code zu schreiben, es ist einfacher zu tun als zu erklären: D