Javascript 带jquery的圆形旋转/放大菜单

我正在尝试制作一个包含5个项目/图标的菜单，选中的一个位于中间。单击此居中图标的左侧或右侧，向左或向右旋转菜单，环绕边缘，并将最靠近边缘的项目移回对面的项目。单击居中的项目会将您带到其链接的URL

菜单也应该以类似于OS X dock的方式进行放大，但放大级别是基于位置而不是鼠标上方设置的

我做了一个比我的漫无边际更容易理解的图表

（来源：）

我已经设法拼凑出一个简单的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>

所有.navblock元素都已绝对定位。#leftnav和#righnav元素也具有较高的z索引，因此浮动在项目/图标上方

---

我看过各种jQuery插件，但没有一个能满足我的需要。

我建议你使用现有的解决方案，而不是自己去做，浪费时间让它正常工作。这里有几点建议（我想通过谷歌可以找到更多的建议）

---

你似乎走对了方向。一个问题是这条线

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

应在substr中使用8：

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

---

您可以更改CSS类并使用jQueryUI的

switchClass（）

方法来设置旋转动画，而不是更改

id

属性（这在一开始是不应该做的）

您还必须执行一点

clone（）

ing，使其看起来像边缘

navblock

s已旋转到小部件的另一侧，并使用一些

queue（）

/

dequeue（）

来处理多次单击

工作演示： （可通过编辑）

完整资料来源： JavaScript CSS #导航{ 宽度：580像素；高度：120像素； 位置：相对；左侧：150px； 溢出：隐藏； } .navblock{ 高度：100px；宽度：100px； 位置：绝对；顶部：10px；z指数：50； 背景颜色：灰色； } .navblock0{左：-110px；} .navblock1{左：10px；} .navblock2{左：120px；} .navblock3{左：230px；宽：120px；高：120px；顶：0；} .navblock4{左：360px；} .navblock5{左：470px；} .navblock6{左：590px；} #左导航，#右导航{ 位置：绝对；z指数：100；高度：120px；宽度：228px； } #leftnav{left:0；} #rightnav{right:0；} /*取消注释以下内容以帮助调试或查看内部工作*/ /* #导航{边框：1px纯绿色；溢出：可见；} #左导航，#右导航{边框：1px纯蓝色；} */ HTML

一
二
三
四
五
我已经查看了大部分的停靠菜单，但是，由于我的知识有限，我看不出有什么方法能使它们旋转，特别是环绕着。抱歉，我在变化的中间复制粘贴，我的坏。这个ID过去是导航块，现在是NavBoad。快速双击leftnav或RightNav非常感谢，这与我正在尝试做的事情非常接近。正如Jitter所说，多次点击似乎有点疯狂，但在Safari上也不起作用。我将深入挖掘一点，你让我走上了正确的轨道。Safari/chrome问题是jQuery UI中的一个bug。它在最新的主干中得到了修复。我“我更新了答案以修复双击错误。新代码使用jQuery的
queue（）
和
dequeue（）
按顺序执行旋转的方法，它看起来非常健壮——它可以处理任意数量的快速或慢速点击。我还更新了演示，使用几分钟前jquery UI主干中jquery.effects.core.js的快照，因此演示可以在webkit中工作（我在Chrome 4中测试过它）。
oldPos = parseInt($(this).attr('id').substr(8));

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

#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; }
*/
<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>