使用 jquery 的圆形旋转/放大菜单
-
19-09-2019 - |
题
我正在尝试制作一个包含 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 插件,但似乎没有一个能满足我的需要。
解决方案
而不是改变 id
属性(你实际上不应该首先这样做)你可以更改 CSS 类并使用 jQuery UI switchClass()
方法来设置旋转动画。
你还必须做一些 clone()
让它看起来像边缘 navblock
s 已旋转到小部件的另一侧,并且一些 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; } */
超文本标记语言
<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>
其他提示
而不是做这个自己和得到这个正常工作浪费时间的,我建议你使用现有的解决方案的。这里有几个指针(我想有更多的可以通过使用谷歌中找到
您似乎是在正确的轨道上。一个问题是,这条线
oldPos = parseInt($(this).attr('id').substr(9));
应该在SUBSTR使用8:
oldPos = parseInt($(this).attr('id').substr(8));
不隶属于 StackOverflow