特效介绍

仿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>
