带有jquery的圆形旋转/放大菜单
我正在尝试制作一个包含5个项目/图标的菜单，其中所选项目位于中心。单击此居中图标的左侧或右侧，向左或向右旋转菜单，环绕边缘并移动最靠近边缘的项目通过相反的边缘。单击居中的项目将转到其链接的URL。
菜单也应该以类似于OS X底座的方式放大，除了放大级别是根据位置而不是鼠标悬停设置的。
我做了一个比我的ramblings更容易理解的图表。
alt text http://img442.yfrog.com/img442/9321/navdiagram.png
我已经设法凑齐了一个简单的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>
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');
});
});
没有找到相关结果
已邀请:
3 个回复
耐钨徒
方法为旋转设置动画，而不是更改属性（您实际上不应该首先做）。 你还需要做一些ing让它看起来像边缘s已经旋转到小部件的另一侧和一些/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');}); }); });磐乓铝举
乏摩纶誊伟
oldPos = parseInt($(this).attr('id').substr(9));oldPos = parseInt($(this).attr('id').substr(8));