Круглое вращающееся / увеличивающее меню с помощью jquery

Question

Я пытаюсь создать меню, содержащее 5 элементов / значков, причем выбранный из них находится в центре.Щелчок слева или справа от этого значка по центру приводит к повороту меню влево или вправо, обводя края и перемещая тот элемент, который был ближе всего к краю, обратно через противоположный.Нажав на элемент по центру, вы перейдете по его URL-ссылке.

Меню также должно увеличиваться аналогично док-станции OS X, за исключением того, что уровни увеличения устанавливаются в зависимости от положения, а не от наведения курсора мыши.

Я нарисовал диаграмму, которую легче понять, чем мой бред.

_{(источник: yfrog.com)}

Мне удалось сколотить простую версию jQuery, где элементы меняются местами по мере необходимости, но я не могу понять, как анимировать это движение, особенно обтекание части по краям, и изменять размер в зависимости от положения.

Я предполагаю, что мой код, вероятно, тоже не самый лучший :)

HTML-код выглядит следующим образом:

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

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

});

Все элементы .navblock абсолютно позиционированы.Элементы #leftnav и #rightnav также имеют более высокий z-индекс, поэтому плавают над элементами / значками.

Я просмотрел различные плагины jQuery, но ни один из них не кажется близким к тому, что мне нужно.

Answer 1

Вместо того, чтобы меняться id атрибуты (чего вам действительно не следует делать в первую очередь) вы можете изменять классы CSS и использовать пользовательский интерфейс jQuery switchClass() способ анимации вращения.

Вам также пришлось бы немного поработать clone()чтобы это выглядело как край navblockони повернулись на другую сторону виджета, и некоторые queue()/dequeue()как обрабатывать несколько кликов.

Рабочая демонстрация:

http://jsbin.com/ovemu (доступно для редактирования через http://jsbin.com/ovemu/edit)

Полный Источник:

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

Вместо того чтобы делать это самостоятельно и тратить время на то, чтобы заставить это работать должным образом, я предлагаю вам использовать существующие решения.Вот несколько указателей (я думаю, гораздо больше можно найти с помощью Google

jQuery:Док-станция, похожая на Mac

Док-станция для значков, похожая на Mac (v2)

Меню док-станции MAC CSS

jQuery, имитирующий док-станцию OS X

Простая док-станция, похожая на OSX, с jQuery

Плагин iconDock для jQuery

Answer 3

Кажется, вы на правильном пути.Одна из проблем заключается в том, что эта строка

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

Следует использовать 8 в substr:

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