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/