網頁載入中，請稍候...
偶然間逛到，覺得蠻新奇的，可以滿足mac的愛好者.....
下載網址：
http://www.ndesign-studio.com/file/css-dock-menu.zip
demo預覽：
http://www.ndesign-studio.com/demo/css-dock-menu/css-dock.html
使用方式：
1. 插入底下的程式碼在 <head> </head> 之間<script type="text/javascript" src="js/jquery.js"></script>這段是css設定
<script type="text/javascript" src="js/interface.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 7]>
<style type="text/css">
.dock img { behavior: url(iepngfix.htc) }
</style>
<![endif]–>
2. 在<Body>裡面插入底下的程式碼
<script type="text/javascript">
$(document).ready(
function()
{
$(』#dock2′).Fisheye(
{
maxWidth: 60,
items: 『a',
itemsText: 』span',
container: 『.dock-container2′,
itemWidth: 40,
proximity: 80,
alignment : 『left',
valign: 『bottom',
halign : 『center'
}
)
}
);
</script>
3. 新增或移除選項
假如你的dock是放在頂端
<a class="dock-item" href="#"><img src="images/home.png" alt="home" /><span>Home</span></a>
假如你的dock是放在底部
<a class="dock-item2" href="#"><span>Home</span><img src="images/home.png" alt="home" /></a>
兩者的寫法不太相同
作者已經測試過在
IE 6, IE 7, Opera 9, Firefox 2, and Safari 2 等瀏覽器下都可以使用
我想其它以他們為核心的應該也是可以使用的
當然我想這個應該不一定只能擺最上面或最下面
有興趣的人，既然都有Source Code了
我想，應該可以發揮你的創意，改變一下使用的方式
原文連結：
http://www.ndesign-studio.com/blog/mac/css-dock-menu
留言列表
期貨 (2)