javascript - 使用jquery点击多次旋转图像

Question

我正在尝试使用 jquery 旋转图像，该图像将在多次单击鼠标时旋转。使用 jquery-rotate插件，以下代码仅旋转图像一次(在 Firefox 中转换为 Canvas )，并且在进一步点击时将不再旋转。

$(".drag-and-rotatable img").click(function() {
    $(this).rotate(45);
});

我愿意使用其他 JavaScript 库。

Answer 1

当你说 rotate(45) 时，你是在将图像旋转 45 度？ (确保它不是弧度，我不使用插件)从原始旋转开始，所以如果你想继续旋转你必须继续增加或减少度数:

$(function() {                                    // doc ready
    var rotation = 0;                             // variable to do rotation with
    $(".drag-and-rotatable img").click(function() {
        rotation = (rotation + 45) % 360; // the mod 360 probably isn't needed
        $(this).rotate(rotation);
    });
});