Home » jQuery 外掛

[jQ]jRumble 1.3

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



jRumble 是個可以讓指定的元素產生類似得猴(ㄉㄧㄡˇ ㄍㄠˊ)效果的外掛。雖然多少可以增加網頁的活潑性,但一整個都抖動的話,也許會影響瀏覽器的效能喔!

套件名稱:jRumble
套件版本:1.3
作者網站:http://jackrugile.com/jrumble/
套件網址:N/A
發佈日期:2011-12-03
檔案大小:4.84 KB
檔案下載:jquery.jrumble.1.3.js

參數說明:

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
X(選填)
描述: 水平抖動範圍(px)
預設值: 2
 
Y(選填)
描述: 垂直抖動範圍(px)
預設值: 2
 
rotation(選填)
描述: 旋轉抖動範圍(degrees)
預設值: 1
 
speed(選填)
描述: 抖動的速度, 數字越小抖會快;單位毫秒(1000毫秒 = 1秒)
預設值: 15
 
opacity(選填)
描述: 是否抖動時改變透明度
預設值: false
 
opacityMin(選填)
描述: 如果 opacity 設為 true, 則在抖動過程會改變透明度範圍
預設值: .5

方法說明:

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
// 初使化設定
$(selector).jrumble(options);
 
// 開始抖動
$(selector).trigger('startRumble');
 
// 停止抖動
$(selector).textualizer('stopRumble');

使用範例:

檢視原始碼 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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.jrumble.1.3.js"></script>
<style type="text/css">
	div {
		background: #f36;
		color: #fff;
		font-size: 30px;
		font-weight: bold;
		line-height: 130px;
		margin: 10px 20px 20px 0;
		text-align: center;
		float: left;
		height: 130px;
		width: 130px;	
	}
</style>
<script type="text/javascript">
	$(function() {
		// 上下左右搖動但不旋轉
		$('#demo1').jrumble({
			x: 2,
			y: 2,
			rotation: 0
		});
 
		// 上下左右搖動且旋轉加透明效果
		$('#demo2').jrumble({
			x: 6,
			y: 6,
			rotation: 6,
			speed: 5,
			opacity: true,
			opacityMin: .05
		});
 
		// 當滑鼠移到 #demo1, #demo2 時開始/停止效果
		$('#demo1, #demo2').hover(function(){
			$(this).trigger('startRumble');
		}, function(){
			$(this).trigger('stopRumble');
		});
	});
</script>
 
<body>
	<div id="demo1">1</div>
 
	<div id="demo2">2</div>
</body>
範例 1

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

備註:
因為整個抖動主要是透過 CSS3 來做出效果的,所以像是 rotation 的部份在 IE8(含)以下就沒有效果囉!

2 筆針對 [jQ]jRumble 1.3 的迴響

發表迴響