How to rotate with Pixastic jquery more than once?

问题:

I try to rotate my image when I click(using Pixastic) but I can only rotate 1 time, how can I go on rotating each time I click to the image

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

回答1:

I have NOT used Pixastic before. But, I believe, everytime the image is clicked , you have to increase the angle 90 .

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

Updated:

It seems Pixastic remove the image first and insert it again. That's why onClick handler is executed once. Change it to "live" and it will work.

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

Check Demo : here.

回答2:

If you want to rotate it finer than 90 degree, you could also use the HTML5 range Element (or a workaround for deprecated browsers ( like IE 9 and below ;-) )

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() });
}

Kind regards to Jacob Seidelin for his great plugin!