Question

我一直在努力让div围绕圆圈旋转到设定点。

这是小提琴：http://jsfiddle.net/TMuD5/2/

但是，我似乎已达到技能水平的最后阶段。我只是JS / JQuery的大三学生所以请温柔。

如果你看一下小提琴，你会在底部看到四个链接。如果单击第一个旋转框，则向左移动一个空格。它很棒。但它只能工作一次。我用过：

$("#box" + i).data('position', degreeRot);

将当前位置添加到数据属性，但它似乎无法正常工作。我甚至不建议按右键。

所以，如果你不介意帮助我，我会有几个问题。

1）为什么不将新度数添加到数据位置属性？我怎样才能让它继续循环，一次一步。
2）我使用 - = 表示正确的方框，但他们没有。那是为什么？
3）如何让它一次移动2个或3个空格？

提前谢谢你。我真的很感激所有的帮助和建议:)

Answer 1

你的代码有很多错误，但特别是，我认为你使用左/右的东西使它过于复杂。只需使用正数或负数来表示要旋转的数量：

<p class="worldMenuPosition " data-spaces="-1" id="box1">Rotate one space left</p>
<p class="worldMenuPosition" data-spaces="1" id="box2">Rotate 1 space right</p>
<p class="worldMenuPosition " data-spaces="-2" id="box1">Rotate two spaces left</p>
<p class="worldMenuPosition" data-spaces="2" id="box2">Rotate 2 spaces right</p>

一旦切换到该方法，代码就可以逐步重构为：

$(document).ready(function () {
    var currentRotation = -35,
        rotationIncrement = 35;

    $(".worldMenuPosition").click(function () {
        var spaces = $(this).data("spaces");

        rotateToDirection(spaces * rotationIncrement);
    });

    function rotateToDirection(deg) {
        currentRotation += deg;

        positionBoxes();
    }

    function rotateTo(deg, box) {
        var bplate = ["translate(-50%,-50%) rotate(", deg,
                      "deg) translateY(-200px) rotate(", -5, "deg)"];

        $(box).css({
            "transform": bplate.join("")
        });
    }

    function positionBoxes() {
        $(".worldSection").each(function (index, element) {
            rotateTo(currentRotation + (index * rotationIncrement), element);
        });
    }

    // Initialize positions
    positionBoxes();
});

http://jsfiddle.net/TMuD5/9/

你要求对错误进行解释，所以这里有一点解释。

好吧，如果我们看看＆＃34;左边＆＃34;代码的分支，每次点击＆＃34;剩下一个空格＆＃34;时，它会更改所有4个按钮的data-position。按钮。第一次点击＆＃34;剩下一个空格＆＃34;按钮，它向左旋转35度，并更新所有4个按钮的data-position属性，以便在单击＆＃34;剩下的一个空格＆＃34;时单击这些值序列。按钮：

box1 - -70, -35, 0, 35, 70, ...
box2 - 0, 70, 140, 210, 280, ...
box3 - -70, 35, 140, 245, 350, ...
box4 - 0, 140, 280, 420, 560, ...

所以当你下次点击＆＃34;剩下一个空格＆＃34;时，它会将束旋转到-35度位置（这是一个向右的空间），然后是0度，然后是35度等。因此，每次点击都会将系统旋转35度到右侧。

＆＃34;对＆＃34;你的代码的分支也遇到了类似的问题，但是由于你在每次迭代中减去35，所以它更糟糕。这会导致所有框改变位置并向左旋转。

围绕圆圈设定度数和位置旋转。

1 个答案: