Jacascript和CSS实现Mac OS导航菜单
作者 佚名技术
来源 CSS技术
浏览
发布时间 2012-03-01
|
熟悉Mac OS看到这个东西可能比较熟悉，不过这个DOCK效果不是用flash做的，而是用Jacascript和CSS实现的，网站上用这个导航一定很漂亮。 点击这里下载代码压缩包 使用说明 1. 插入代码 在<head> </head> 标签中，插入下面的代码 <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/interface.js"></script> <link href="style.css" _fcksavedurl=""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> 4. 添加或者删除menu的条目 在顶部的DOCK添加条目 (注意: span 标签在 img 之后): <a class="dock-item" href="#"><img src="images/home.png" alt="home" /><span>Home</span></a> 在底部的DOCK添加条目 (注意: span 标签在 img 之前): <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 |
凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢! |
你可能对下面的文章感兴趣
上一篇: 合理利用HTML标记优化网页布局下一篇: CSS教程:定位属性Position
关于Jacascript和CSS实现Mac OS导航菜单的所有评论
