Question

我正在使用这个jQuery插件：http://code.google.com/p/jqueryrotate/wiki/Documentation

我有插件工作和一切，但我想要做的是单击按钮旋转图像，每次单击按钮它连续旋转+/- 90度，而不仅仅是一定程度。我不太确定如何通过这个插件实现这一目标。

理想情况下，下面的代码会做我想要的，但事实并非如此。

$("body").on("click", ".theater-wrapper img", function(){

    $(".theater-wrapper .current").rotate(+90);

});

Answer 1

这样的东西？

$("body").on("click", ".theater-wrapper img", function(){

    $(".theater-wrapper .current").rotate(getNextAngle());

});

nextAngle = 0;
function getNextAngle() {
    nextAngle += 90;    
    if(nextAngle >= 360) {
        nextAngle = 0;
    }
    return nextAngle;
}

可能不是什么大问题，但为了避免获得大量数字，您可以在需要时将值重置为0.

Answer 2

工作演示 http://jsfiddle.net/jKYkT/

点击 + 和 - 按钮进行角度旋转

希望这符合原因:)

<强>码

newangle = 0;

$('input').click(function() {
    if ($(this).attr('class') == "minus")
        operation = "-";
    else
        operation = "+";

    alert(operation)
    var angle = next(operation);
    $("#image").rotate(angle);
});

function next(oper) {
   if (oper == "+")
      newangle += 90;
    else
      newangle -= 90;

   if (newangle >= 360) newangle = 0;

    return newangle;

}

Answer 3

我没有看过插件，但我假设它是使用跨浏览器支持的CSS3转换旋转。它总是需要一个特定的角度，所以你必须用某种变量跟踪你当前的角度。一个好的解决方案可能是HTML5数据标记，您可以在每次单击时递增，特别是如果您希望在DOM中有多个旋转图像。所以说你的HTML是这样的：

<div class='image_wrap'>
    <img class='image_to_rotate' />
    <div class='rotate_btn' data-rotate='0'></div>
</div>

因此，当用户单击旋转按钮时，它将抓取此变量并将其递增90，然后将新值存储在同一位置，以便在下次单击时将其递增。您的jQuery可能如下所示：

$('.rotate_btn').click(function(){
    //Grab the current set angle
    var angle = parseInt($(this).data('rotate')) + 90;

    //Rotate the image
    $(this).siblings('.image_to_rotate').rotate(angle);

    //Store new angle for next increment
    $(this).data('rotate', angle);
})

这未经过测试，但您应该有足够的时间在这里继续。如果您需要进一步的指导，请查看.data上的jQuery文档。

Answer 4

var rotation = 0;
$("body").on("click", ".theater-wrapper img", function(){
    rotation +=90;
    $(".theater-wrapper .current").rotate({ animateTo:rotation });
});

或

var rotation = 0;
$("body").on("click", ".theater-wrapper img", function(){
    rotation +=90;
    var rotation_angle_mod = rotation%360;
    $(".theater-wrapper .current").rotate(rotation_angle_mod);
});

jQuery旋转图像（使用旋转插件）每次单击旋转+/- 90度

4 个答案: