跨浏览器控制图片旋转jquery插件 -JS/jQuery代码 -演示与下载 -时代Java

跨浏览器控制图片旋转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})
    }
  }
});					
					
下载代码说明
X关闭

跨浏览器控制图片旋转jquery插件jquery.rotate.js

jQueryRotate.js是一款跨浏览器控制图片旋转jquery插件。jQueryRotate.js旋转图片插件可以使用CSS3动画来对图片进行任意角度的旋转。对于不支持CSS3动画的浏览器,插件会自动使用canvas或VML(IE6)技术进行回退。本段代码兼容目前最新的各类主流浏览器,适用浏览器:搜狗、360、FireFox(建议)、Chrome、Safari、Opera、傲游、世界之窗,