Circular Rotating / Vergrößerungs Menü mit jquery

Question

Ich versuche, ein Menü zu machen, die 5 Elemente enthalten / Symbole mit der ausgewählten in der Mitte zu sein. Ein Klick auf die links oder rechts von diesem zentriert Symbol, dreht sich das Menü nach links oder rechts, Wickeln um die Kanten und beweglichen je nachdem, was Punkt am nächsten an der Kante zurück war durch den entgegengesetzten. Ein Klick auf dem zentrierten Punkt bringt Sie zu ihrer verknüpften URL.

Das Menü sollte auch in einer Art und Weise ähnlich wie die OS X-Dock mit Ausnahme der Vergrößerungsstufen vergrößern auf Position Satz basiert nicht Mouseover.

Ich habe ein Diagramm hergestellt, das als mein Geschwafel leichter zu verstehen ist.

_{(Quelle: yfrog.com )}

Ich habe eine einfache jQuery-Version zusammenschustern verwaltet, wo die Gegenstände Positionen je nach Bedarf austauschen, kann aber nicht herausfinden, wie diese Bewegung zu animieren, vor allem die Verpackung um die Teilkanten und ändern Sie Größe basierend auf Position.

ich meinen Code zu erraten ist wahrscheinlich nicht die beste entweder:)

Der HTML-Code ist wie folgt:

<div id="nav">
<div id="leftnav"></div>
<div id="rightnav"></div>
<div id="navblock1" class="navblock">
    one
</div>
<div id="navblock2" class="navblock">
    two
</div>
<div id="navblock3" class="navblock">
    three
</div>
<div id="navblock4" class="navblock">
    four
</div>
<div id="navblock5" class="navblock">
    five
</div>

Und die JS:

function rotateNav(direction) {
var change = (direction=='left')?(-1):(+1);
$('div.navblock').each(function() {
    oldPos = parseInt($(this).attr('id').substr(9));
    newPos = oldPos+change;
    if (newPos == 0)
        newPos = 5;
    else if (newPos == 6)
        newPos = 1;
    $(this).attr('id','navblock'+newPos);
});
}
$(document).ready(function(){
$("#leftnav").click(function() {
    rotateNav('right');
});
$("#rightnav").click(function() {
    rotateNav('left');
});

});

Alle .navblock Elemente sind absolut positionned. Die #leftnav und #rightnav Elemente auch, und sie haben einen höheren Z-Index so schweben über die Elemente / Symbole.

Ich habe an verschiedenen jQuery Plugins gesucht, aber keiner scheint nahe, was ich brauche.

Answer 1

Statt id Attribute ändern (die Sie wirklich nicht in erster Linie tun sollen) können Sie CSS-Klassen ändern und jQuery UI switchClass() Methode verwenden, um die Drehung zu animieren.

Sie würden auch ein wenig zu tun haben, von clone()ing, um es wie die Rand navblocks aussehen haben auf die andere Seite des Widgets und einige queue() gedreht um / dequeue()ing mehrere Klicks zu behandeln.

Arbeits Demo:

http://jsbin.com/ovemu (editierbar über http://jsbin.com/ovemu/edit )

Voll Quelle:

JavaScript

function rotateNav(direction) {
if (direction === 'left') {
  var change = 1;
  $('.navblock5').clone()
    .removeClass('navblock5')
    .addClass('navblock0')
    .appendTo('#nav');
}
else {
  var change = -1;
  $('.navblock1').clone()
    .removeClass('navblock1')
    .addClass('navblock6')
    .appendTo('#nav');
}

$('div.navblock').each(function() {
  var oldClassName = this.className.split(' ')[1],
    oldPos = parseInt(oldClassName.substr(8)),
    newPos = oldPos + change;

    $(this).switchClass(
      oldClassName,
      'navblock'+newPos,
      'fast', 
      function () { 
        var animated = $('.navblock:animated').length;
        if (newPos === 6 || newPos === 0) {
          $(this).remove(); 
        } 
        if (animated === 1) {
          $('#nav').dequeue();
        }
      }
    );
});
}

$(document).ready(function(){
$("#leftnav").click(function() {
  $('#nav').queue(function(){rotateNav('right');});
});
$("#rightnav").click(function() {
  $('#nav').queue(function(){rotateNav('left');});
});
});

CSS

#nav { 
  width: 580px; height: 120px; 
  position: relative; left: 150px; 
  overflow: hidden; 
}

.navblock { 
  height: 100px; width: 100px; 
  position: absolute; top: 10px; z-index: 50;
  background-color: grey;
}
.navblock0 { left: -110px; }
.navblock1 { left: 10px; }
.navblock2 { left: 120px; }
.navblock3 { left: 230px; width: 120px; height: 120px; top: 0;}
.navblock4 { left: 360px; }
.navblock5 { left: 470px; }
.navblock6 { left: 590px; }

#leftnav, #rightnav { 
  position: absolute; z-index: 100; height: 120px; width: 228px;
}
#leftnav { left: 0; }
#rightnav { right: 0; }

/*Uncomment the following to help debug or see the inner workings */
/*
#nav { border: 1px solid green; overflow: visible; }
#leftnav, #rightnav { border: 1px solid blue; }
*/

HTML

<div id="nav">
<div id="leftnav"></div>
<div id="rightnav"></div>

<div class="navblock navblock1">one</div>
<div class="navblock navblock2">two</div>
<div class="navblock navblock3">three</div>
<div class="navblock navblock4">four</div>
<div class="navblock navblock5">five</div>

Answer 2

Statt dessen selbst zu tun und Zeit zu verschwenden diese richtig an die Arbeit auf immer ich vorschlagen, dass Sie bestehende Lösungen diejenigen verwenden. Hier ein paar Hinweise (ich viel mehr erraten können mit Hilfe von Google

finden

jQuery: Mac-like Dock

Mac-like Symboldock (v2)

MAC CSS Dock Menu

jQuery Nachahmen die OS X-Dock

Einfach OSX-like-Dock mit jQuery

iconDock jQuery Plugin

Answer 3

Sie scheinen auf dem richtigen Weg zu sein. Ein Problem ist, dass diese Zeile

oldPos = parseInt($(this).attr('id').substr(9));

Sollte 8 in der substr verwenden:

oldPos = parseInt($(this).attr('id').substr(8));