雖然未來 CSS3 中可能會有讓元素旋轉角度的 transform 屬性，但在未正式之前，各家瀏覽器還是有自己的寫法。所以若想要先在網頁中搶先使用的話，jAngle 是一個不錯的選擇。
套件名稱：jAngle
套件版本：0.5
作者網站：http://corydorning.com/projects/jangle
套件網址：N/A
發佈日期：2011-10-14
檔案大小：5.00 KB
檔案下載：jquery.jangle.js
參數選項說明：
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | continuous(選填) 描述： 是否由現在的角度為起始 預設值： false degrees(選填) 描述： 要旋轉的角度 預設值： 0 duration(選填) 描述： 角度改變的速度；單位毫秒(1000毫秒 = 1秒) 預設值： 0 interval(選填) 描述： 更新角度的速度, 會影響整個動畫是否滑順；單位毫秒(1000毫秒 = 1秒) 預設值： 100 |
方法說明：
檢視原始碼 JavaScript
1 2 | // 改變角度 $(selector).jangle(options); |
使用範例：
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.jangle.js"></script> <style type="text/css"> .demo { position: absolute; top: 100px; left: 100px; width: 130px; height: 20px; } </style> <script type="text/javascript"> $(function() { $(':button').click(function(){ // 取得輸入的角度 var angle = parseInt($('#degress').val()) || 0; // 5 秒內改變成指定的角度 $('.demo').jangle({ degrees: angle, duration: 5000 }); }); }); </script> <body> <label for="degress">Enter an angle: <input type="text" id="degress" />(-360 to 360)</label><button>Rotate!</button> <div class="demo">男丁格爾's 脫殼玩</div> </body> |