7

对于那些喜欢用头撞电脑键盘的人来说，这是一个有趣的游戏。

网站：http ://blduke.com.php53-27.dfw1-2.websitetestlink.com

有趣的 jQuery 小东西就在导航下方。它实际上是一个径向菜单（插件）。该插件包括将触发顺时针和逆时针旋转的功能，默认情况下不显示径向菜单。所以我有了初始化径向菜单的代码，立即显示它的代码，以及每隔一段时间触发下一次旋转的代码。最后，我使用插件的 API 连接到 afterAnimation 选项，以确保将“活动”类应用于“活动”菜单项 - 我将使用它来做一些有趣的 CSS 东西，旋转一些到此图形的右侧等。您可以看到列表项上的“活动”类现在只是添加了一个红色背景。

这在 IE8+、Firefox、Safari 和 17.0-19.0 版本的 Chrome 中绝对完美。在 Chrome 20.x 中，它以一种奇怪的方式中断。

活动类仍然会在应该切换到适当的列表项时，但是浏览器正在做一些奇怪的事情，比如延迟活动类在新项目上的呈现，或者在某些时候完全跳过它，或者在两个项目上显示它（上一个项目，以及下一个项目）

没有脚本错误，我很困惑，插件开发人员也是如此。任何人有任何想法，见解？

我的代码：

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

为什么你需要一个插件呢？您只是在为三个简单元素的顶部和左侧设置动画。为什么不手动写。您确定提供的示例代码不会再长了。

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 上测试。

这将确保在您调用旋转插件时所有 div 都会丢失该类，并在函数运行active时将其正确添加回顶部项目。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 回答