7

これは、コンピューターのキーボードに頭を打ち付けるのが好きな人のための楽しいものです。

サイト: http://blduke.com.php53-27.dfw1-2.websitetestlink.com

ここのナビゲーションのすぐ下で、楽しい小さな jQuery が行われています。実際にはラジアル メニュー ( plugin ) です。プラグインには、時計回りと反時計回りの回転をトリガーする関数が含まれており、デフォルトではラジアル メニューは表示されません。ラジアル メニューを初期化するコード、すぐに表示するコード、一定間隔で次のローテーションをトリガーするコードを用意しました。最後に、プラグインの API を使用して afterAnimation オプションにフックし、「アクティブな」クラスが「アクティブな」メニュー項目に適用されるようにしました。この図の右側など。リスト項目の「アクティブな」クラスが現在、赤い背景を追加しているだけであることがわかります。

これは、IE8+、Firefox、Safari、および Chrome のバージョン 17.0 ~ 19.0 で完全に機能します。Chrome 20.x では、奇妙な方法で壊れます。

アクティブなクラスは適切なリスト項目にスワップする必要がありますが、ブラウザは新しい項目でアクティブなクラスのレンダリングを遅らせたり、いくつかの時点で完全にスキップしたり、2 つの項目で表示したりするなど、奇妙なことをしています (それが最後にあった項目、および次の項目)

スクリプト エラーはなく、プラグイン dev と同様に困惑しています。誰にもアイデアや洞察はありますか?

私のコード:

jQuery(document).ready(function($) {
    $("#radial_container").radmenu({
        listClass: 'list', // the list class to look within for items
        itemClass: 'item', // the items - NOTE: the HTML inside the item is copied     into the menu item
        radius: 130, // radius in pixels
        animSpeed:400, // animation speed in millis
        centerX: 0, // the center x axis offset
        centerY: 0, // the center y axis offset
        angleOffset: 30, // in degrees,
        afterAnimation: function($m){ // after the animation triggers, grab the     "active" menu item (object) to recieve the "active" class
            $("#radial_container").radmenu(2); 
        }
   }).radmenu("show"); // Show the menu straight off, we don't need to trigger with a click

    setInterval(function() { // automatically rotate the menu at intervals
        $('#radial_container').radmenu('next');
    }, 4000);

});
4

2 に答える 2

2

なぜそのためのプラグインが必要なのですか? 3 つの単純な要素の上部と左側をアニメーション化するだけです。手動で書いてみませんか。あなたが提供したサンプルコードよりも長くはありません。

function setPosition(element, position) {
   var placements = [[100,100], [200, 200], [0, 200]] ; //for instance

   $(element).stop().animate({left: placements[position][0]+ 'px', top: placements[position][1] + 'px'});

   if (position == 0) { $(element).addClass('activeMenuItem');}
}

var state = 0;

function rotateMenu(direction) {
    state += direction;
    if (state < 0) state = 2;
    if (state > 2) state = 0;

    $('.menuItem').removeClass('activeMenuItem');

    setPosition('#item0', state  % 3);
    setPosition('#item1', (state + 1) % 3);
    setPosition('#item2', (state + 2) % 3);
}

それでおしまい。rotateMenu(1)一方向にrotateMenu(-1)回転しながら、別の方向に回転します。

メニュー項目には、class="menuItem" と id="item" が含まれます。

ちょっとしたデモ用のjsFiddleを次に示します。

于 2012-07-15T01:17:23.047 に答える
1

ローカルでテスト中にコードを少し編集しました。

setInterval(function() { // automatically rotate the menu at intervals
    $('.radial_div div').removeClass('active'); //add this line
    $('#radial_container').radmenu('next');
}, 4000);

Chrome 20 および FF16a でテスト済み。

activeこれにより、回転プラグインを呼び出したときにすべての div がクラスを失い、afterAnimation関数の実行時にトップ項目に適切に追加されます。


次に、新しい問題を常に発生させることができないため、デバッグが非常に難しいようです。ただし、これを試してください:

afterAnimation: function($m){ // after the animation triggers, grab the "active" menu item (object) to recieve the "active" class
    setTimeout(function() {
        $("#radial_container").radmenu(2);
    }, 0); 
}

これによりradmenu、現在の関数スタックの処理が終了した後にのみ関数が呼び出されるようになります。数分間監視しましたが、バグは一度もありませんでした。

また、すでにクラスでトップ項目を開始したい場合はactive、次を追加するだけです:

$('.radial_div div:nth-child(3)').addClass('active');

.ready関数内のどこでも。

于 2012-07-15T01:53:26.367 に答える