4

我有一个将 div 旋转 90 度的按钮，称为 bacon。

如果我按下按钮一次，代码将起作用，将 div 旋转 90 度。

如果我再次按下按钮，则不会发生任何其他事情。

$("#button").on("click", function () {
    $("#bacon").css({
        '-moz-transform':'rotate(90deg)',
        '-webkit-transform':'rotate(90deg)',
        '-o-transform':'rotate(90deg)',
        '-ms-transform':'rotate(90deg)',
        'transform':'rotate(90deg)'
    });
});

我希望上面的代码做的是让我继续无限旋转。所以我按一次，它把培根从原来的角度旋转 90 度，两次旋转 180 度，三次旋转 270 度，等等。

谢谢。

*编辑：我有第二个按钮，除了逆时针方向外，它#button2的作用相同。#button当我按下#button它时，它会旋转 90 度，然后#button2将其恢复到原来的状态，按下#button将再次起作用并使其再次变为 90 度。

基本上，在我按下一个按钮后，只有另一个按钮会随后工作，所以我只能在 2 个状态之间交替，而不是允许完全旋转所有 4 个可能的状态。

4

2 回答 2

3

将旋转放入变量中，并每次递增：

var cur_rotation = 0;
$("#button").on("click", function() {
    cur_rotation = (cur_rotation + 90) % 360;
    var rot = 'rotate('+cur_rotation+'deg)';
    $("#bacon").css({
        '-moz-transform':rot,
        '-webkit-transform':rot,
        '-ms-transform':rot,
        'transform':rot
    });
});

第二个按钮应该是相同的，除了它减去 90 而不是加。

于 2013-10-01T02:04:26.527 回答
2

您还可以使用类：

var cls = ['rotate-90', 'rotate-180', 'rotate-270', 'rorate-360'],
      i = 0;

$("#button").on("click", function () {
    $("#bacon").removeClass(cls.join(' ')).addClass(cls[i % cls.length]);
    i++;
});
于 2013-10-01T02:21:53.110 回答