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的id方法为旋转设置动画，而不是更改switchClass()属性（您实际上不应该首先执行此操作）。

你还需要做一些clone()来让它看起来像边缘navblock已经旋转到窗口小部件的另一边和一些queue() / { {1}处理多次点击。

工作演示：

http://jsbin.com/ovemu（可通过http://jsbin.com/ovemu/edit编辑）

完整来源：

的JavaScript

dequeue()

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

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

Answer 2

我建议您使用现有的解决方案，而不是自己动手并浪费时间让它正常工作。这里有一些指示（我想使用谷歌可以找到更多的东西

jQuery: Mac-like Dock

Mac-like icon dock (v2)

MAC CSS Dock Menu

jQuery mimicking the OS X dock

Simple OSX-like dock with jQuery

iconDock jQuery Plugin

Answer 3

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

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

应该在substr中使用8：

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

圆形旋转/放大菜单与jquery

3 个答案:

工作演示：

完整来源：

的JavaScript

CSS

HTML