鼠标移上去放大的水晶动感jquery导航栏代码

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

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！