circulaire rotatif / agrandissement menu avec jquery

Question

Je suis en train de faire un menu qui contient 5 articles / icônes avec celle sélectionnée étant au centre. En cliquant à gauche ou à droite de cette icône centrée, fait tourner le menu à gauche ou à droite, enveloppant autour des bords et se déplaçant selon le point a été le plus proche du bord avant à travers l'une en face. En cliquant sur l'élément centré vous amène à son URL liée.

Le menu devrait également augmenter d'une manière similaire au dock OS X, sauf les niveaux de grossissement sont fixés en fonction de la position non mouseover.

Je l'ai fait un diagramme qui est plus facile à comprendre que mes divagations.

_{(source: yfrog.com )}

J'ai réussi à concocter une version simple jQuery, où les éléments de swap positions au besoin, mais ne peut pas comprendre comment animer ce mouvement, en particulier l'enrouler autour de la partie des bords, et modifier la taille en fonction de la position.

Je suppose que mon code est probablement pas le meilleur soit:)

Le code HTML est comme suit:

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

Et la 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');
});

});

Tous les éléments de .navblock sont absolument positionnés. Les #leftnav et éléments #rightnav aussi et ils ont un z-index supérieur flottant donc au-dessus des objets / icônes.

Je l'ai regardé divers plugins jQuery, mais aucun ne semble proche de ce que j'ai besoin.

Answer 1

Au lieu de changer les attributs de id (que vous devriez vraiment pas faire en premier lieu), vous pouvez modifier les classes CSS et utiliser la méthode de switchClass() de jQuery UI pour animer la rotation.

Vous auriez aussi faire un peu de clone()ing pour la faire ressembler à la pointe navblocks ont tourné autour de l'autre côté du widget et certains queue() / dequeue()ing pour gérer plusieurs clics.

Démo de travail:

http://jsbin.com/ovemu (modifiable via http://jsbin.com/ovemu/edit )

Source complète:

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

Au lieu de faire vous-même et de perdre du temps à obtenir que cela fonctionne correctement, je vous suggère d'utiliser les solutions existantes. Voici quelques conseils (je suppose que beaucoup d'autres peuvent être trouvés en utilisant Google

jQuery: Mac-like Dock

dock icône Mac-like (v2)

MAC CSS Dock Menu

jQuery mimer le dock OS X

simple dock comme OSX avec jQuery

iconDock jQuery Plugin

Answer 3

Vous semblez être sur la bonne voie. Un problème est que cette ligne

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

doit utiliser 8 dans le substr:

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