これは、コンピューターのキーボードに頭を打ち付けるのが好きな人のための楽しいものです。
サイト: 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);
});