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

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

jQueryRotate.js说明

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

使用方法

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

1 2	<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()：返回图片旋转的角度。

1 2 3 4 5 6 7 8

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

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14

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