示例一:图片旋转

$("#img").rotate(45);
//或者
$("#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);					
			

示例四:图片无限旋转(使用回调函数)

var rotation = function (){
$("#img").rotate({
angle:0,
animateTo:360,
callback: rotation
});
}
rotation();					
			

示例六:图片无限旋转(使用回调函数并自定义easing动画)

var rotation = function (){
$("#img").rotate({
angle:0,
animateTo:360,
callback: rotation,
easing: function (x,t,b,c,d){ // t: current time, b: begInnIng value, c: change In value, d: duration
return c*(t/d)+b;
}
});
}
rotation();					
			

示例六:点击图片旋转(使用jquery.easing插件)

$("#img").rotate({
bind:
{
click: function(){
$(this).rotate({ angle:0,animateTo:180,easing: $.easing.easeInOutExpo })
}
}
});					
			

示例七:点击图片旋转指定的角度

var value = 0
$("#img").rotate({
bind:
{
click: function(){
value +=90;
$(this).rotate({ animateTo:value})
}
}
});					
			

适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.

来源:站长素材