Circular layout der HTML-Elemente

in einer HTML-Seite ich möchte das layout einer Liste von Elementen in eine kreisförmig.

Also ich Frage mich, ob es eine einfache Möglichkeit dies zu tun, mit HTML5/CSS3;
und wenn ein plugin von jQuery /jQuery UI oder jede andere JavaScript-Bibliothek verwaltet diese Art von layout.

Vielen Dank im Voraus für jede Hilfe.

EDIT:

Nun bin ich verwendet habe, jQuery Radmenu : http://www.tikku.com/jquery-radmenu-plugin;
aber seine inneren arbeiten ein wenig ungeschickt.

Ich bis Ende Mai mit einer benutzerdefinierten Lösung, die inspiriert von dzejkej code-Beispiel.

Möglich dupe? stackoverflow.com/questions/8218124/...
Check-out jCurvy - jcurvy.com/index.html
cssplay.co.uk/menus/cssplay-Runde-und-Runde.html#url
danke, jCurvy scheint cool für Bezier-Kurven, die aber in dem aktuellen Fall würde ich gerne einen reinen Kreis.
Schauen Sie sich auch jQuery Roundrr - vielleicht ist das, was Sie suchen. Demo hier und tutorial hier.

InformationsquelleAutor Pragmateek | 2011-12-08

19

Reinen JavaScript-Beispiel, wie man HTML in einem kreisförmigen layout:
```
//retrieve the elements however you want (class name, tag name, ..)
var elems = document.getElementsByTagName('div');
var increase = Math.PI * 2 / elems.length;
var x = 0, y = 0, angle = 0;

for (var i = 0; i < elems.length; i++) {
  elem = elems[i];
  //modify to change the radius and position of a circle
  x = 100 * Math.cos(angle) + 200;
  y = 100 * Math.sin(angle) + 200;
  elem.style.position = 'absolute';
  elem.style.left = x + 'px';
  elem.style.top = y + 'px';
  angle += increase;
}
```
HIER ist der Arbeits-code.
- Vielen Dank, sauber und einfach; aber es berücksichtigt nicht die Größe der Elemente. Also wenn Sie nicht die gleiche Größe, das layout sieht elliptisch. Aber diese sollten verwendbar sein, die in meiner situation, als ich sollte die Bilder anzuzeigen.
- das ist nur ein Beispiel um zu demonstrieren, wie das zu erreichen ist das kreisförmige layout. Sie nicht geben Sie mehr details ein :). Sie können ihn ändern, nehmen Sie die Größe in Erwägung, indem Sie mit der Breite und Höhe bei der Berechnung x und y.
- Coulc Sie bitte erklären var increase = Math.PI * 2 / elems.length; wie pro Ihre logische Bedeutung?
- Ein voller Kreis ist 2*Pi Radianten, also der Kreis wird geteilt durch die Anzahl der Elemente, so können die Elemente werden in gleichem Abstand um den Kreis herum.
InformationsquelleAutor kubetz

Können Sie RaphaelJS, mit jQuery oder andere Frameworks, die Sie genießen.

Diese demo wird Ihnen helfen: http://raphaeljs.com/hand.html

window.onload = function () {
    var r = Raphael("holder", 640, 480), angle = 0;
        while (angle < 360) {
            var color = Raphael.getColor();
            (function (t, c) {
                r.circle(320, 450, 20).attr({stroke: c, fill: c, transform: t, "fill-opacity": .4}).click(function () {
                s.animate({transform: t, stroke: c}, 2000, "bounce");
            }).mouseover(function () {
                this.animate({"fill-opacity": .75}, 500);
            }).mouseout(function () {
                this.animate({"fill-opacity": .4}, 500);
            });
        })("r" + angle + " 320 240", color);
        angle += 30;
    }
    Raphael.getColor.reset();
    var s = r.set();
    s.push(r.path("M320,240c-50,100,50,110,0,190").attr({fill: "none", "stroke-width": 2}));
    s.push(r.circle(320, 450, 20).attr({fill: "none", "stroke-width": 2}));
    s.push(r.circle(320, 240, 5).attr({fill: "none", "stroke-width": 10}));
    s.attr({stroke: Raphael.getColor()});
};

Danke Gabriel für dieses Beispiel; aber AFAIK Raphael ist wirklich interessant (und selbst geil) für SVG-manipulation. Hier meine Elemente können anyhting und ich will nicht blotter mein code mit SVG hackeries.

InformationsquelleAutor Gabriel Gartz

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.