Home » jQuery 外掛

[jQ]jQuery Approach 1.01

[ 日期： | 瀏覽：8,787 | 迴響：搶沙發 ]
範例 1
請協助我把這個效果加到我的網站 (只要 900 元)
沒錯!只要 900 元就能獲得我們團隊完整的協助，讓效果能迅速的整合到您的網站，並保證瀏覽器的相容性。
立刻申請!



一般的 .animate() 通常都是直接針對指定好的值來做動畫，但 jQuery Approach 則是有提供觸發距離的判斷，可以依距離來決定套用的效果比例！

套件名稱：jQuery Approach
套件網址：1.01
作者網站：http://srobbin.com/jquery-plugins/approach/
套件網址：N/A
發佈日期：2009-11-23
檔案大小：8.04 KB
檔案下載：jquery.approach.js

參數選項說明：

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11

styles(選填)
描述： 當滑鼠接近時想要改變的樣式
預設值： 無
 
distance(選填)
描述： 偵測的距離範圍
預設值： 400
 
callback(選填)
描述： 當 approach 效果套用後要執行的動作
預設值： 無

方法說明：

檢視原始碼 JavaScript
1
2

// 把指定的元素轉換成計算機
$(selector).approach(styles, distance, callback);

使用範例：

檢視原始碼 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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.approach.js"></script>
<style type="text/css">
	body {
		background: #000;
	}
	.wrap {
		width: 670px;
		height: 268px;
		cursor: pointer;
		margin: 30px auto;
	}
	#demo-link {
		font-size: 24px;
		color: #ffc;
		line-height: 36px;
		text-align: center;
		text-decoration: none;
	}
	.circle {
		float: left;
		height: 80px;
		width: 80px;
		opacity: 0.2;
		filter: alpha(opacity=20);
		zoom: 1;
		z-index: 0;
	}
</style>
<script type="text/javascript">
	$(function(){
		// 讓文字依距離來產生不同的尺寸並改變顏色
		$("#demo-link").approach({
			fontSize: 54,
			color: "#c30"
		}, 300);
 
		// 讓圖片依距離來產生不同的透明度感
		$(".circle").approach({
			opacity: 0.8
		}, 100);
	});
</script>
 
<body>
	<div class="wrap">
		<a id="demo-link">把滑鼠慢慢的從遠處移向我</a>
	</div>
 
	<div class="wrap">
		<img class="circle" src="images/circle.jpg" />
		<img class="circle" src="images/circle.jpg" />
		<img class="circle" src="images/circle.jpg" />
		<img class="circle" src="images/circle.jpg" />
		<img class="circle" src="images/circle.jpg" />
		<img class="circle" src="images/circle.jpg" />
		<img class="circle" src="images/circle.jpg" />
		<img class="circle" src="images/circle.jpg" />
		<img class="circle" src="images/circle.jpg" />
		<img class="circle" src="images/circle.jpg" />
		<img class="circle" src="images/circle.jpg" />
		<img class="circle" src="images/circle.jpg" />
		<img class="circle" src="images/circle.jpg" />
		<img class="circle" src="images/circle.jpg" />
		<img class="circle" src="images/circle.jpg" />
		<img class="circle" src="images/circle.jpg" />
		<img class="circle" src="images/circle.jpg" />
		<img class="circle" src="images/circle.jpg" />
		<img class="circle" src="images/circle.jpg" />
		<img class="circle" src="images/circle.jpg" />
		<img class="circle" src="images/circle.jpg" />
		<img class="circle" src="images/circle.jpg" />
		<img class="circle" src="images/circle.jpg" />
		<img class="circle" src="images/circle.jpg" />
		<img class="circle" src="images/circle.jpg" />
		<img class="circle" src="images/circle.jpg" />
		<img class="circle" src="images/circle.jpg" />
		<img class="circle" src="images/circle.jpg" />
		<img class="circle" src="images/circle.jpg" />
		<img class="circle" src="images/circle.jpg" />
		<img class="circle" src="images/circle.jpg" />
		<img class="circle" src="images/circle.jpg" />
		<img class="circle" src="images/circle.jpg" />
		<img class="circle" src="images/circle.jpg" />
		<img class="circle" src="images/circle.jpg" />
		<img class="circle" src="images/circle.jpg" />
		<img class="circle" src="images/circle.jpg" />
		<img class="circle" src="images/circle.jpg" />
		<img class="circle" src="images/circle.jpg" />
		<img class="circle" src="images/circle.jpg" />
		<img class="circle" src="images/circle.jpg" />
		<img class="circle" src="images/circle.jpg" />
		<img class="circle" src="images/circle.jpg" />
		<img class="circle" src="images/circle.jpg" />
		<img class="circle" src="images/circle.jpg" />
		<img class="circle" src="images/circle.jpg" />
		<img class="circle" src="images/circle.jpg" />
		<img class="circle" src="images/circle.jpg" />
	</div>
</body>
範例 1

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

備註:
原作者捉要加入引用 calculator.css，但筆者發現加入後的效果也沒特別的好。另外使用時記得額外引用 jQuery UI 的 js 及 css 主題檔案才行。

發表迴響