偶然間逛到,覺得蠻新奇的,可以滿足mac的愛好者.....

css-dock-menu.jpg

下載網址:
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>
<script type="text/javascript" src="js/interface.js"></script>


這段是css設定

<link href="style.css" rel="stylesheet" type="text/css" />


這段是針對IE7所做的設定

<!--[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

arrow
arrow
    全站熱搜

    brian6724 發表在 痞客邦 留言(2) 人氣()