首页 > 特效插件 > 导航菜单 >  鼠标移上去放大的水晶动感jquery导航栏代码正文

鼠标移上去放大的水晶动感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>