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

查看演示立即下载

插件描述：跨浏览器控制图片旋转jquery插件进行任意角度的旋转。对于不支持CSS3动画的浏览器，插件会自动使用canvas或VML（IE6）技术进行回退。

jQueryRotate.js说明

jQueryRotate.js是一款跨浏览器控制图片旋转jquery插件。jQueryRotate.js旋转图片插件可以使用CSS3动画来对图片进行任意角度的旋转。对于不支持CSS3动画的浏览器，插件会自动使用canvas或VML（IE6）技术进行回退。

使用方法

在页面<中引入jQueryRotate.js文件。

<script src="path/to/jquery.min.js"></script>
<script src="path/to/jQueryRotate.js"></script>

API

jQueryRotate.js插件集成了4个用于图片旋转的方法，分别为：

rotate(angle)
rotate(parameters)
getRotateAngle()
stopRotate()

一、rotate(angle)：简单的将图片旋转任意角度。

1	`$("#img").rotate(45);`

二、rotate(parameters)：通过配置参数来旋转图片。

parameters参数包括：
angle [Number] ：图片旋转角度，默认为0度。
bind [Object] ：绑定事件。
animateTo [Number] ：图片旋转到指定的角度，默认为0。
center [Array] ：定义图片旋转的中心点。
duration [Number] - 图片旋转的持续时间，默认为1000。
step [Function] ：每一步动画后执行的回调函数。
easing [Function] ：图片旋转的easing动画。
callback[Function] ：图片旋转动画结束后的回调函数。

三、getRotateAngle()：返回图片旋转的角度。

$("#img").rotate({
  angle: 45,
    bind: {
      click : function(){
      alert($(this).getRotateAngle());
    }
  }
});

四、stopRotate()：停止图片旋转动画。

$("#img").rotate({
  bind: {
    click: function(){
      $("#img").rotate({
        angle: 0,
        animateTo: 180,
        duration: 6000
      });
      setTimeout(function(){
        $("#img").stopRotate();
      }, 1000);
    }
  }
});

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效： html元素转为canvas并一键保存png图片
下一个特效： jquery上传插件pictureHandle.js