Home » jQuery 外掛

[jQ]IconDock 0.8 beta

[ 日期： | 瀏覽：14,125 | 迴響：33 ]
範例 1
請協助我把這個效果加到我的網站 (只要 900 元)
沒錯!只要 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

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

附註：
圖片的檔名要跟著 iconMinSide 及 iconMaxSide 這兩屬性來設定才會有用。

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

1 2 3
1 2 3

發表迴響