jQuery.rotate.js笔记
1. jQuery.rotate.js是什么
一个开源的兼容多浏览器的jQuery插件用来对元素进行任意角度的旋转动画。
这个库开发的目的是为了旋转img的，在3.x之后的版本可能支持其它元素，但旋转其它元素在一些低版本浏览器可能出现兼容器问题。所以应该尽量只用在旋转img元素上。
2. jQuery.rotate.js怎么用
2.1 接口
总共提供了四个方法：
rorate(angle);
rorate(parameters);
getRorateAngle();
stopRotate();
2.1.1 rorate(angle);
传入一个角度，会直接将元素旋转到对应的角度，并不会有动画：
$("#foo").rotate(15);
效果：
2.1.2 rorate(parameters);
支持的参数：
| 参数名 | 类型 | 说明 |
| angle | Number | 旋转到指定的角度，不带动画，默认是0 |
| animateTo | Number | 旋转到指定的角度，使用动画 |
| bind | Object | 可以传入一个对象，作为事件绑定到元素上。 |
| center | Array | 用来设定旋转的中心，传入的数组是[X,Y]格式的，可以使用数值[100,100]或者百分比[“50%”,“50%”]，默认是以元素的中心点旋转 |
| duration | Number | 指定动画的持续时间，默认是1000毫秒 |
| step | Function | 传入一个回调函数在动画的每一步都会调用一下 |
| easing | Function | 让动画看起来更自然，感觉用不到，而且本人对图形学没啥研究，感兴趣的官网有详细描述，就不再深究了…. |
| callback | Function | 当动画完成时的回调函数。 |
关于bind的想法：
jQuery已经为我们提供了很健全的事件绑定接口了，为啥这里还提供bind呢？
猜想可能是为了将同义操作统一化。
Demo ： 一个简单的例子（倾斜的图画在鼠标移上去的时候摆正，离开的时候又恢复原样）：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body{ text-align:center; } #foo{ width:300px; height:200px; margin-top:100px; } </style> </head> <body> <img id="foo" src="img/foo.jpg" alt="" /> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jQueryRotate.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#foo").rotate({ angle:15, bind:{ mouseover:function(){ $(this).rotate({ animateTo:0 }); }, mouseout:function(){ $(this).rotate({ animateTo:15 }); } } }); }); </script> </body> </html>
效果：
Demo：center的使用
代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body{ text-align:center; } #foo{ width:200px; height:130px; margin-top:100px; } </style> </head> <body> <img id="foo" src="img/foo.jpg" alt="" /> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jQueryRotate.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#foo").rotate({ bind:{ click:function(){ $(this).rotate({ center:["0","100%"], animateTo:90 }); } } }); }); </script> </body> </html>
效果：
2.1.3 getRorateAngle();
获取元素当前旋转的角度
$(document).ready(function(){ $("#foo").rotate({ angle:15, bind:{ click:function(){ console.log($(this).getRotateAngle()); } } }); });
2.1.4 stopRotate();
停止元素的旋转。
一个小例子，元素不断的匀速旋转，单击时停止旋转：
$(document).ready(function(){ var rotate=function(){ $("#foo").rotate({ angle:0, animateTo:360, duration:5000, callback:rotate, easing: function (x,t,b,c,d){ return c*(t/d)+b; }, bind:{ click:function(){ $(this).stopRotate(); } } }); } rotate(); });
效果：
另一种实现元素不断旋转的方法：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body{ text-align:center; } #foo{ width:300px; height:200px; margin-top:100px; } </style> </head> <body> <img id="foo" src="img/foo.jpg" alt="" /> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jQueryRotate.js"></script> <script type="text/javascript"> $(document).ready(function(){ var angle=0; var rotate=function(){ angle=angle+10; $("#foo").rotate({ animateTo:angle, duration:100 }) } setInterval(rotate,100); }); </script> </body> </html>
效果并不是特别理想，感觉有些卡顿。
3. 总结
1. jQuery.rotate适合对img元素进行旋转操作。
2. 可以设置动画过渡，可以设置过渡的时间。
3. 可以设置完成回调函数。
4. 可以自定义旋转中心。
5. 可以设置动画曲线。
6. 编不出了…
参考资料：
1. 官网 http://jqueryrotate.com/