1

我正在尝试制作一个包含 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 插件，但似乎没有一个接近我需要的。

4

3 回答 3

2

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

您还必须做一些clone()ing 以使其看起来像 edge navblocks 已经旋转到小部件的另一侧，并且 some 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

#导航{
  宽度：580px；高度：120px；
  位置：相对；左：150px；
  溢出：隐藏；
}

.navblock {
  高度：100px；宽度：100px；
  位置：绝对；顶部：10px；z 指数：50；
  背景颜色：灰色；
}
.navblock0 { 左：-110px; }
.navblock1 { 左：10px; }
.navblock2 { 左：120px; }
.navblock3 { 左：230px; 宽度：120px；高度：120px；顶部：0；}
.navblock4 { 左：360px; }
.navblock5 { 左：470px; }
.navblock6 { 左：590px; }

#leftnav，#rightnav {
  位置：绝对；z 指数：100；高度：120px；宽度：228px；
}
#leftnav { 左：0; }
#rightnav { 右：0; }

/*取消注释以下以帮助调试或查看内部工作原理*/
/*
#nav { 边框：1px 纯绿色；溢出：可见；}
#leftnav, #rightnav { 边框：1px 纯蓝色；}
*/

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>
于 2009-12-15T19:15:52.677 回答
0

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

jQuery：类似 Mac 的 Dock

类似 Mac 的图标底座 (v2)

MAC CSS 停靠菜单

jQuery 模仿 OS X 扩展坞

带有 jQ​​uery 的简单的类似 OSX 的停靠栏

iconDock jQuery 插件

于 2009-12-15T17:26:27.637 回答
0

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

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

应该在 substr 中使用 8：

oldPos = parseInt($(this).attr('id').substr(8));
于 2009-12-15T18:24:50.327 回答