使用 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-index，因此浮动在项目/图标上方。

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

Answer 1

您可以更改 CSS 类并使用 jQuery UI 的 switchClass() 方法来设置旋转动画，而不是更改 id 属性（您实际上不应该这样做）。

您还必须执行一些clone()操作，使其看起来像边缘navblock已旋转到小部件的另一侧，并且一些>queue()/dequeue()ing 处理多次点击。

工作演示：

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

我建议您使用现有的解决方案，而不是自己执行此操作并浪费时间使其正常工作。这里有一些提示（我想可以通过使用谷歌找到更多提示

jQuery：类似Mac的Dock

类似 Mac 的图标底座 (v2)

MAC CSS Dock 菜单

jQuery 模仿 OS X 停靠栏

使用 jQuery 的类似 OSX 的简单底座

iconDock jQuery 插件

Answer 3

你似乎走在正确的轨道上。一个问题是这一行

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

应该在子字符串中使用 8：

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