Question

Link to code

大家好，我有一个圆圈菜单（上面的链接），我希望所选项目旋转到“3点”，停在那里打开内容。下一个选中的项目应该旋转到相同的位置并执行相同的操作等。使用jquery.path插件，我设法旋转了8个项目但是当我再次单击某个项目时，它根本不会继续旋转但是重置动画。

另外我认为通过比较左侧和顶部值，可以检查所选项目是否在“3点钟”位置。但是，如果有人有更好的解决方案，我很乐意听到它。

我不希望任何人给我一个完整的脚本，但我会感激任何帮助，指出我的错误为什么动画重置或指向我正确的方向。即使JavaScript大师可以告诉我，我实现菜单的方法是垃圾，而且它比我想象的要复杂得多。谢谢！ :)

Answer 1

这里只是一个猜测，但我没有看到你将当前角度存储在任何地方。这意味着你告诉他们每次从0开始并遍历原始数组。您需要在函数外部存储某种偏移量。这样的事情可以奏效：

var fin = -1;
$('a.box').click(function() {

    var menu_items = Array("#box_8", "#box_7", "#box_6", "#box_5", "#box_4", "#box_3", "#box_2", "#box_1");
    fin++;

    var startAngle = 180 + fin * 45;
    var endAngle = 135 + fin * 45;
    var topLock = "154px";
    var leftLock = "260px";

    //$(this).addClass('selected');

        for (var i=0; i < menu_items.length; i++) {

            startAngle += 45;
            endAngle += 45;
            $(menu_items[i]).animate({
                path: new $.path.arc({
                    center: [154, 154],
                    radius: 106,
                    start: startAngle,
                    end: endAngle,
                    dir: -1
                }),
                opacity: '1'
                },400);
        };

});

我还认为您的结束角度和起始角度是关闭的。看起来拨号盘正在切换动画的数字，这意味着它可能会向后移动，然后将它们设置为当前位置。这可能通过将fin（上面的新变量）设置为0作为初始值来解决。

作为助手：你

您可能希望将menu_items存储在点击处理程序之外。
您还将menu_items.length存储为循环外的变量。

然后你可以定义角度差异。如360 / menu_items.length然后有：

  var angleDiff  = 360 / menuLength;
  var startAngle = 180 + fin * angleDiff;
  var endAngle = 135 + fin * angleDiff;

以及此（在循环内）：

        startAngle += angleDiff;
        endAngle += angleDiff;

Answer 2

var menu_items = Array("#box_8", "#box_7", "#box_6", "#box_5", "#box_4", "#box_3", "#box_2", "#box_1");
var menuLength = menu_items.length;
var angleDiff  = 360 / menuLength;
var fin = 0;

$('a.box').click(function() {
var startAngle = 180 + fin * angleDiff;
var endAngle = 225 + fin * angleDiff;
fin++;
    var topLock = "154px";
    var leftLock = "260px";

        for (var i=0; i < menu_items.length; i++) {
        startAngle += angleDiff;
        endAngle += angleDiff;
        $(menu_items[i]).animate({
            path: new $.path.arc({
                center: [154, 154],
                radius: 106,
                start: startAngle,
                end: endAngle,
                dir: 1
            }),
            opacity: '1'
            },400);
        };
});

单击后，菜单项的JavaScript旋转卡住

2 个答案: