• 用jquery做了个导航条的便捷功能


    公司主要还是做一些企业站,导航条是必不可少的,首页,关于我们,产品介绍。。。。 设计做的时候一般都有鼠标移上去变背景,有时候有个下拉菜单,公司以前的就是用javascript  每个导航上onmouseover   onmouseout,每个下拉上也是,为了减少开发量就做个jquery的小功能

    js代码

    View Code
     1 (function($){   
     2 $.fn.extend({   
     3                 MenuHoverLayerout1:function(opt,callback){
     4 
     5             var _obj=this;
     6             var _menuID=opt.menuID
     7             var _ArryWidth=opt.ArryWidth
     8             var _ArryLeft=opt.ArryLeft
     9             
    10             
    11             
    12             var i=1;
    13             $(_obj).each(function(){
    14                                   
    15                 //取得导航按钮宽度                    
    16                 var LiWidth=typeof(_ArryWidth[i-1])!='undefined'?_ArryWidth[i-1]:100;
    17                 
    18                 //漂浮居左距离
    19                 var absLeft=typeof(_ArryLeft[i-1])!='undefined'?_ArryLeft[i-1]:0;
    20                                  
    21                 $(this).css("text-align","left");//让漂浮层从居左 和 父元素对齐                
    22                 $(this).width(LiWidth);//导航按钮宽度赋值                
    23                 
    24                 var classname="BiakeCss_Li"+i;//鼠标划过时的样式
    25                 var classname1="BiakeCss_LiM"+i;//选中后 防止背景消失 再次加背景
    26                 
    27                 
    28                 
    29                 //对应栏目选中
    30                 if(_menuID==i)
    31                 {
    32                     $(this).addClass(classname);                    
    33                 }
    34                 
    35                 
    36                 //添加漂浮元素定位
    37                 var absolute_p="<div class=\"Parent_absolute\"><div class=\"Child_absolute\"></div></div>";                    
    38                 $(this).append(absolute_p)    
    39                 
    40                 $(this).find(".Child_absolute").width(LiWidth).css("left",absLeft);//设定漂浮层宽度和居左距离
    41                 
    42                 //漂浮层内容添加 从页面获取
    43                 var absContent=$("#Biake_Absolute #Biake_abs"+i);
    44                 $(absContent).appendTo($(this).find(".Child_absolute"));
    45                 
    46                 
    47     
    48                 $(this).hover(function(){
    49                     $(this).addClass(classname1);
    50                     $(this).find(".Child_absolute").show();
    51                 },function(){
    52                     $(this).removeClass(classname1);
    53                     $(this).find(".Child_absolute").hide();
    54                 })                
    55                 
    56                 i++;
    57             })
    58         }        
    59 })   
    60 })(jQuery);


    页面代码

    View Code
    <!--自定义导航-->
    <div class="Menu">
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
        <div id="Biake_Absolute">        
            <div id="Biake_abs2" class="Biake_Absolute"></div>
            <div id="Biake_abs3" class="Biake_Absolute"></div>
    
        </div>
    </div> 
    <script type="text/javascript">    
         $(".Menu li").MenuHoverLayerout1({
    
            menuID:2,//当前栏目ID
            ArryWidth:[95,106,105,105,104,108,107,105,108],//导航按钮宽度
            ArryLeft:[0,0,-20]//漂浮居左的距离,不写则默认为0
         
         });
    </script>

    js写法上有什么问题,欢迎大家指出~

  • 相关阅读:
    JSON学习笔记
    Java面试题之对static的理解
    【知了堂学习笔记】java基础知识之继承
    【知了堂学习笔记】多态基本知识
    Final关键字
    子父类构造函数特点
    原来学编程这么简单,如何理解程序的本质(今天听了【遇见狂神说】发布的《从HelloWorld到程序本质的思考》这个视频,有了自己的一些感悟,在这里和大家做一个分享)
    浅谈c3p0连接池和dbutils工具类的使用
    Mysql数据库重要知识点
    Express安装与调试
  • 原文地址:https://www.cnblogs.com/BiakeChou/p/2480018.html
Copyright © 2020-2023  润新知