jQuery가있는 원형 회전/확대 메뉴

Question

선택한 아이콘이 중앙에있는 5 개의 항목/아이콘이 포함 된 메뉴를 만들려고합니다. 이 중앙 아이콘의 왼쪽 또는 오른쪽으로 클릭하면 메뉴를 왼쪽 또는 오른쪽으로 회전하고 가장자리를 감싸고 반대쪽을 통해 가장자리에 가장 가까운 항목을 움직입니다. 중앙 항목을 클릭하면 연결된 URL로 이동합니다.

메뉴는 또한 배율 수준이 마우스 오버가 아닌 위치에 따라 설정되는 것을 제외하고 OS X Dock과 유사한 방식으로 확대해야합니다.

나는 내 램 블링보다 이해하기 쉬운 다이어그램을 만들었습니다.

_{(원천: 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

변화하는 대신 id 속성 (처음에는 실제로하지 말아야 할 일) CSS 클래스를 변경하고 jQuery UI를 사용할 수 있습니다. switchClass() 회전을 애니메이션하는 방법.

당신은 또한 약간의 일을해야합니다 clone()가장자리처럼 보이게합니다 navblockS는 위젯의 다른쪽으로 회전했고 일부는 queue()/dequeue()여러 번의 클릭을 처리합니다.

작업 데모 :

http://jsbin.com/ovemu (편집 가능한 http://jsbin.com/ovemu/edit)

전체 출처 :

자바 스크립트

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>

Answer 2

이 작업을 직접 수행하고 제대로 작동하는 데 시간을 낭비하는 대신 기존 솔루션을 사용하는 것이 좋습니다. 여기에 몇 가지 포인터가 있습니다 (Google을 사용하여 더 많은 것을 찾을 수 있다고 생각합니다.

jQuery : Mac-Like Dock

Mac-Like Icon Dock (V2)

Mac CSS 도크 메뉴

jQuery는 OS X Dock을 모방합니다

jQuery가있는 간단한 OSX와 같은 도크

iCondock jQuery 플러그인

Answer 3

당신은 올바른 길을 가고있는 것 같습니다. 한 가지 문제는이 줄입니다

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

기판에서 8을 사용해야합니다.

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