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
