特效介绍
仿MAC风格的动感水晶风格导航栏,把鼠标移动到导航按钮上,会放大显示。本插件使用了iepngfix.htc的png透明效果,即使在任何浏览器(包含IE6),任何平台,图标背景也是透明的。关于iepngfix.htc的使用方法,参见:使用iepngfix.htc解决IE6下PNG的透明问题
使用方法
1、在头部引入下面的代码:<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]-->2、把<!-- 代码开始 -->和<!-- 代码结束 -->之间的代码拷贝到您需要引入的位置。
3、当然,您也可以将interface.js这种放大效果使用到自己写的导航栏上,具体方法是:
1)写html和css
2)引入jquery.js和interface.js。
3)调用js:
<script type="text/javascript"> $(document).ready( function() { $('#dock2').Fisheye(//您的导航栏最外层“包裹”的ID { maxWidth: 60, //导航图标放大后的最大宽度,经测验,理解为放大比例更好。 items: 'a',//图标“包裹” itemsText: 'span',//图标文字“包裹” container: '.dock-container2',//导航栏第二层“包裹”的class名 itemWidth: 40,//图标放大前大小 proximity: 80,//图标感应区域。自己尝试。 valign: 'bottom',//垂直方向上位置。 halign : 'center'//水平方向位置。 } ) } ); </script>