如果是第一次接觸到 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> |
附註:
圖片的檔名要跟著 iconMinSide 及 iconMaxSide 這兩屬性來設定才會有用。
了解~就是images檔案裡面也要有128.jpg的大圖片才抓得到
利用這個jQuery IconDock 0.8 beta
如何可以把連結開於新分頁, 而不是開啟在同一分頁???
在超連結中加入 target="_blank"