Круглое вращающееся / увеличивающее меню с помощью 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-индекс, поэтому плавают над элементами / значками.
Я просмотрел различные плагины jQuery, но ни один из них не кажется близким к тому, что мне нужно.
Решение
Вместо того, чтобы меняться id
атрибуты (чего вам действительно не следует делать в первую очередь) вы можете изменять классы CSS и использовать пользовательский интерфейс jQuery switchClass()
способ анимации вращения.
Вам также пришлось бы немного поработать clone()
чтобы это выглядело как край navblock
они повернулись на другую сторону виджета, и некоторые queue()
/dequeue()
как обрабатывать несколько кликов.
Рабочая демонстрация:
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>
Другие советы
Вместо того чтобы делать это самостоятельно и тратить время на то, чтобы заставить это работать должным образом, я предлагаю вам использовать существующие решения.Вот несколько указателей (я думаю, гораздо больше можно найти с помощью Google
jQuery:Док-станция, похожая на Mac
Док-станция для значков, похожая на Mac (v2)
jQuery, имитирующий док-станцию OS X
Кажется, вы на правильном пути.Одна из проблем заключается в том, что эта строка
oldPos = parseInt($(this).attr('id').substr(9));
Следует использовать 8 в substr:
oldPos = parseInt($(this).attr('id').substr(8));