jQueryを使ってメニューを拡大/回転する円形

Question

私は、中心にある選択された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要素は絶対にpositionnedされています。また#leftnavと#rightnav要素が、それらはより高いz屈折率が非常にアイテム/アイコンの上に浮いています。

私は、さまざまなjQueryのプラグインを見てきましたが、どれも私が必要なものに近いようではありません。

Answer 1

の代わりに（あなたが本当に最初の場所でやるべきではありません）id属性を変更するので、あなたはCSSクラスを変更し、回転をアニメーション化するjQueryのUIのswitchClass()メソッドを使用することができます。

また、それはウィジェットと複数のクリックを処理するためにいくつかのclone() / navblockingの反対側に周りに回転しているエッジqueue()sのように見えるようにするためにdequeue()ingのビットを行う必要があります。

ワーキングデモ：

http://jsbin.com/ovemuする（編集経由<のhref = "のhttp：// jsbin.com/ovemu/edit」のrel = "nofollowをnoreferrer"> 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>

Answer 2

の代わりに自分自身これを行うと、これは正常に動作し得ることに時間を浪費の私は、あなたが既存のソリューションのものを使用することをお勧め。ここではいくつかのポインタが（私はより多くのを推測グーグルを使って見つけることができます。

jQueryの：Mac風ドックの

マック状アイコンドック（V2）の

jQueryの模倣OS Xのドックの

P>

iconDock jQueryのプラグインする

Answer 3

あなたは正しい軌道に乗っているようです。 1つの問題は、このライン

ということです

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

SUBSTRで8を使用する必要があります。

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