Xoay ảnh với jquery – jquery rotate

Thao tác xoay ảnh theo các góc khác nhau dựa vào 1 plugin trên thư viện jquery  Nguồn : http://code.google.com/p/jqueryrotate/

Dưới đây là đoạn code thể hiện xoay cùng chiều và ngược chiều kim đồng hồ 1 góc 90 độ.

<style type=”text/css”>
#image{
  margin:100px 100px;
}
</style>
<script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js”></script>
<script type=”text/javascript” src=”http://jqueryrotate.googlecode.com/svn/trunk/jQueryRotate.js”></script>
<img src=”https://www.google.com/images/srpr/logo3w.png” id=”image”>
<span id=”up”>90+</span>
<span id=”down”>90-</span>
<script language=”JavaScript”>
  $(“#image”).rotate({
        bind: {
            click: function(){
                 var newangle = parseInt(parseInt($(this).getRotateAngle()) + 90);
                          $(“#image”).rotate({
                          angle: $(this).getRotateAngle(),
                          animateTo: newangle,
                          duration: 1500
                      });

            }
       }
   });
  $(“#up”).click(function () {
      var newangle = parseInt(parseInt($(“#image”).getRotateAngle()) + 90);
             $(“#image”).rotate({
                 angle: $(“#image”).getRotateAngle(),
                 animateTo: newangle,
                 duration: 1500
             });
    });

 $(“#down”).click(function () {
       var newangle =   parseInt($(“#image”).getRotateAngle()) – 90 ;
            $(“#image”).rotate({
                angle: $(“#image”).getRotateAngle(),
                animateTo: newangle,
                duration: 1500
            });

});
   </script>

Trong php có hảm xoay ảnh như sau: imagerotate

Chi tiết xem tại: http://php.net/manual/en/function.imagerotate.php

Chú ý quan trọng là  hàm rotates sẽ xử lý xoay ngược chiều kim đồng hồ, do vậy nếu muốn xoay 1 góc 90 độ theo chiều kim đồng hồ thì phải chỉ định góc là 270 độ khi dùng rotates  : $angle = 360-$angle;

Nếu muốn disable click sau 1 khoảng thời gian thì cần điều chỉnh javascript như sau:
function bindClick() {
$(‘#up’).one(‘click’, function() {
var newangle = parseInt(parseInt($(‘#image’).getRotateAngle()) + 90);
// alert(newangle);
$(‘#image’).rotate({
angle: $(‘#image’).getRotateAngle(),
animateTo: newangle,
duration: 500,
}) ;
setTimeout(bindClick, 2000);
});
}

$(document).ready(function(){
bindClick();
});