Home » jQuery 外掛

[jQ]jAngle 0.5

範例 1
沒錯!只要 600 元就能獲得我們團隊完整的協助,讓效果能迅速的整合到您的網站,並保證瀏覽器的相容性。
立刻申請!



雖然未來 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>
範例 1

檔案描述
基本的範例檔案(免空) 開始下載
基本的範例檔案 會員限定

發表迴響