Круговое вращающееся / увеличительное меню с 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 и использовать метод switchClass() пользовательского интерфейса jQuery для анимации вращения.

Вы также должны были бы сделать немного clone() ing, чтобы сделать его похожим на ребра navblock s, повернутые вокруг другой стороны виджета и некоторые 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

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

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

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

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

Answer 3

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

jQuery: Mac-подобная док-станция

Док в стиле Mac-icon (v2)

Меню MAC CSS Dock

jQuery, имитирующий док OS X

Простой OSX-подобный док с jQuery

iconDock jQuery Plugin