1

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

我有插件工作和一切，但是我想要做的是单击一个按钮来旋转图像，每次单击该按钮时，它都会连续旋转 +/- 90 度，而不仅仅是一定程度。我不太确定如何使用此插件完成此操作。

理想情况下，下面的代码会做我想要的，尽管它没有。

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

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

});
4

4 回答 4

2

像这样的东西？

$("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。

于 2012-10-16T02:58:33.910 回答
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;

}


​
于 2012-10-16T03:17:18.210 回答
0

我没有看过插件，但我假设它是使用跨浏览器支持的 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 文档。

于 2012-10-16T03:10:23.880 回答
0 
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);
});
于 2014-09-12T11:29:36.827 回答