效果图如下
仿苹果机桌面菜单
 
 
所需源文件--见下方文件附件
 
在HTML中的<head>标签中插入如下代码：
< script type ="text/javascript" src ="js/jquery.js" > </script>    
< 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]– >    
第一部分是需要用到的Javascript代码，第二部分是用到的CSS样式表，最后一个是用于 Internet Explorer 6中PNG图片的Hack处理。
 
且记要把下面的代码放到HTML中的<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>    
 
向顶部菜单中增加新的项目（注：<span>标签位于<img>之后）：
< a class ="dock-item" href ="#" > < img src ="p_w_picpaths/home.png" alt ="home" /> < span >Home </span> </a>    
< a class ="dock-item2" href ="#" > < span >Home </span> < img src ="p_w_picpaths/home.png" alt ="home" /> </a>