跨浏览器控制图片旋转jquery插件 Cross-browser jQuery Image Rotation Plugin

示例一:图片旋转

$("#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})
    }
  }
});