Home » jQuery 外掛

[jQ]IconDock 0.8 beta

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



如果是第一次接觸到 Mac 的使用者,應該會對於其桌面的選單感覺到很新奇及絢麗吧!國外就有網友用 jQuery 來模擬出這樣的效果來。而 IconDock 就是一個這樣的外掛。

套件名稱:IconDock
套件版本:0.8 beta
作者網站:http://siknus.cat/icondock-jquery-plugin-mac-os-x-menu-dock
套件網址:http://plugins.jquery.com/project/iconDock
發佈日期:2007-02-05
檔案大小:4.30 KB
檔案下載:jquery.dock-0.8b.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
iconMinSide(選填)
描述: 選單圖示最小的高度,建議值介於 20 - 50
預設值: 35
 
iconMaxSide(選填)
描述: 選單圖示最大的高度,建議值介於 70 - 140
預設值: 70
 
distAttDock(選填)
描述: 效果的衰減距離,就是滑鼠跟效果結束的距離
預設值: 100
 
coefAttDock(選填)
描述: 衰減係數,效果消失的速度,建議值介於 0.5 - 2.5
預設值: 2
 
veloOutDock(選填)
描述: 回復的速度,選單圖示在滑鼠離開後間隔多久要回到原位置(毫秒)
預設值: 1000
 
valign(選填)
描述: 選單圖示排列的方式,允許的值有 'top''bottom''middle'
預設值: 'middle'

方法說明:

檢視原始碼 JavaScript
1
2
// 把指定的區塊轉換成 IconDock 效果
$(selector).addDockEffect(conf);

使用範例:

檢視原始碼 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
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.dock-0.8b.js"></script>
<script type="text/javascript">
	$(function(){
		// 加入 iconDock 效果
		// 對齊圖示的下方
		$("#Bar").addDockEffect({
			iconMinSide : 64,
			iconMaxSide : 128,
			distAttDock : 100,
			coefAttDock : 2,	
			veloOutDock : 500,
			valign: "bottom"
		});
	});
</script>
 
<body>
	<div id="Bar">
		<a href="#">
			<img src="images/1_64.gif" alt="效能檢視" border="0" />
		</a>
		<a href="#">
			<img src="images/2_64.gif" alt="功能設定" border="0" />
		</a>
		<a href="#">
			<img src="images/3_64.gif" alt="事件紀錄" border="0" />
		</a>
		<a href="#" title="能快速掌握整體功能">
			<img src="images/4_64.gif" border="0" />
		</a>
		<a href="#" name="能定時檢查">
			<img src="images/5_64.gif" alt="更新檢查" border="0" />
		</a>
		<a href="#">
			<img src="images/6_64.gif" alt="下載更新" border="0" />
		</a>
	</div>
</body>
範例 1

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

附註:
圖片的檔名要跟著 iconMinSideiconMaxSide 這兩屬性來設定才會有用。

33 筆針對 [jQ]IconDock 0.8 beta 的迴響

發表迴響