如何使用Pixastic jquery多次旋转？

Question

我单击（使用Pixastic）时会尝试旋转图像，但我只能旋转一次，每次点击图像时如何旋转

$('#tok').click(function() {
                $("#tok").pixastic("rotate", {angle:90});                   
            }); 

Answer 1

我之前没有使用过Pixastic。但是，我相信，每次点击图像时，都必须增加角度90°。

First Click -> 90 
Second Click->180 
Third Click ->270
Fourth Click ->360
Fifth Click ->90..etc

更新：

似乎Pixastic首先删除图像并再次插入。这就是onClick处理程序执行一次的原因。将其更改为“实时”，它将起作用。

$('#tok').live('click',function() {
     $(this).pixastic("rotate", {angle:90});                 
});

点击此处Demo :。

Answer 2

如果你想将它旋转到90度以上，你也可以使用HTML5范围元素（或不推荐使用的浏览器的解决方法（如IE 9及以下版本;-)）

HTML（5）

<input type="range" id="rotate" min="-180" max="180" value="0" step="1">

的jQuery

$('.rotate').live('change', function(){
    $('img').pixastic("rotate", {angle: $(this).val() });
}

亲切地向 Jacob Seidelin 致敬，感谢他的精彩插件！