jQuery rotate 圖片旋轉 jQuery rotate 圖片旋轉
  jQuery       ez      2012-06-04

使用jQuery rotate進行圖片旋轉(翻轉)!

套件下載:http://code.google.com/p/jqueryrotate/ or jQueryRotate 2.1

//圖片旋轉45度
$("#img").rotate(45);
or
$("#img").rotate({angle:45});

//滑鼠滑入滑出才做旋轉動作
$("#img").rotate({
     bind: {
               mouseover : function() {
                    $(this).rotate({animateTo:180});
               },
               mouseout : function() {
                    $(this).rotate({animateTo:0});
               }
     }
});
//圖片連續旋轉
var angle = 0;
setInterval(function(){
     angle+=3;
     $("#img").rotate(angle);
},50);

//旋轉360度後,呼叫自己繼續旋轉
var rotation = function (){
     $("#img").rotate({
          angle:0,
          animateTo:360,
          callback: rotation
     });
};
rotation();

//按下圖片進行旋轉
$("#img").rotate({
     bind: {
          click: function(){
               $(this).rotate({angle:0,animateTo:180,easing:$.easing.easeInOutExpo })
          }
     }
});

標籤:   jQuery

我要留言