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)
:简单的将图片旋转任意角度。
$("#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); } } });
jQueryRotate.js控制图片旋转jquery插件的github地址为:https://github.com/wilq32/jqueryrotate