rotazione circolare / menù di ingrandimento con jQuery

Question

Sto cercando di fare un menu che contiene 5 articoli / icone con quella selezionata essendo nel centro. Cliccando a sinistra oa destra di questa icona centrata, ruota il menu a sinistra oa destra, avvolgendo sui bordi e spostando qualsiasi elemento era più vicino al bordo posteriore attraverso quella opposta. Cliccando sulla voce centrato vi porta alla sua URL collegato.

Il menu dovrebbe amplificherà anche in un modo simile al dock di OS X, tranne i livelli di ingrandimento sono impostati in base alla posizione non mouseover.

Ho fatto un diagramma che è più facile da capire che le mie divagazioni.

_{(fonte: yfrog.com )}

Sono riuscito a mettere insieme una semplice versione di jQuery, in cui gli elementi si scambiano di posizione in base alle esigenze, ma non riesco a capire come animare questo movimento, in particolare l'involucro intorno alla parte bordi, e cambiare le dimensioni in base alla posizione.

Sto indovinando il mio codice non è probabilmente la migliore sia:)

Il codice HTML è il seguente:

<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>

E il 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');
});

});

Tutti gli elementi sono assolutamente .navblock positionned. Gli elementi #leftnav e #rightnav anche e hanno un elevato indice z modo galleggiare sopra le voci / icone.

Ho guardato vari plugin jQuery ma nessuno sembra vicino a quello che mi serve.

Answer 1

Invece di cambiare gli attributi id (che davvero non dovrebbe fare, in primo luogo) che si possono cambiare le classi CSS e utilizzare il metodo switchClass() di jQuery UI per animare la rotazione.

Si potrebbe anche avere a che fare un po 'di clone()ing per far sembrare le navblocks bordo hanno ruotato intorno all'altro lato del widget e alcuni queue() / dequeue()ing per gestire più clic.

Facendo Demo:

http://jsbin.com/ovemu (modificabile tramite http://jsbin.com/ovemu/edit )

sorgente completa:

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

Invece di fare da soli e perdere tempo su come ottenere questo per funzionare correttamente ti suggerisco di usare quelle soluzioni esistenti. Ecco alcune indicazioni (Credo che molti altri possono essere trovati utilizzando Google

jQuery: Mac-like dock

Mac-like icona del dock (v2)

MAC CSS Dock Menu

jQuery mimando OS X dock

semplice dock OSX-come con jQuery

iconDock jQuery Plugin

Answer 3

Ti sembra di essere sulla strada giusta. Un problema è che questa linea

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

Dovrebbe utilizzare 8 nella substr:

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