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