项目总结 - jquery.mousewheel.js实际应用

早两天的时候项目上线，所幸目前没有前端的bug，现在可以有空闲时间来写写项目总结。

先看一下项目需求：

需求是左侧菜单栏高度固定，二级菜单可收展。

那么问题就来了，我们项目有很多个一级菜单，已经快要超出一屏的高度，如果要展开二级菜单，超出屏幕部分将看不到（主页面宽高固定死的不允许出现滚动条），最简单的方法是给菜单栏加overflow-y:auto，但是自身会出现滚动条，影响右侧布局而且难看，不可取，但是滚动效果可以完美解决这个需求啊，怎么办呢？这还不简单，有onmousewheel这个东西呢，鼠标滚轮可以触发该事件，用它来模拟滚动条效果，就这么办！

第一步当然就是下载 jquery.mousewheel.js ，这里有示例用法可以参考。

第二部：用起来…

做了个demo，还原了项目菜单栏的大致结构：

html部分：

<div id="wrapper">
<div class="nav-box">
    <ul class="slide-bar">
        <li>
            <a class="first-nav">
                <span>首页span>
                <i class="icon icon-updown">i>
            a>
            <ul class="second-nav hide">
                <li>
                    <a>
                        <span>首页1span>
                        <i class="icon icon-right">i>
                    a>
                li>
                <li>
                    <a>
                        <span>首页2span>
                        <i class="icon icon-right">i>
                    a>
                li>
                <li>
                    <a>
                        <span>首页3span>
                        <i class="icon icon-right">i>
                    a>
                li>
                <li>
                    <a>
                        <span>首页4span>
                        <i class="icon icon-right">i>
                    a>
                li>
            ul>
        li>
        <li>
            <a class="first-nav">
                <span>menu1span>
                <i class="icon icon-updown">i>
            a>
            <ul class="second-nav hide">
                <li>
                    <a>
                        <span>menu1-1span>
                        <i class="icon icon-right">i>
                    a>
                li>
                <li>
                    <a>
                        <span>menu1-2span>
                        <i class="icon icon-right">i>
                    a>
                li>
                <li>
                    <a>
                        <span>menu1-3span>
                        <i class="icon icon-right">i>
                    a>
                li>
                <li>
                    <a>
                        <span>menu1-4span>
                        <i class="icon icon-right">i>
                    a>
                li>
            ul>
        li>
        ...
    ul>
div>
div>  

由于都是重复代码，就不全部放上来了，大家可以自行补上。

css部分：

<style>     body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,
    button,textarea,p,blockquote,th,td{
         margin: 0;
         padding: 0;
    }
    body{
           font-size: 12px;
            font-family: "微软雅黑", arial;
    }
    i,em{
        font-style: normal;
    }
    a{
        text-decoration: none;
    }
    img{
        border: none;
    }
    select,input,img,select{
        vertical-align:middle;
    }
    ol,ul{
        list-style: none;
    } 
    table{
        border-collapse: collapse;
        border-spacing: 0;
    }
    .hide{
        display: none;
    }
    .clearfix{
        overflow: auto;
        _height: 1%;
    }
    #wrapper{
        overflow: hidden;
    }
    .nav-box{
        float: left;
        width: 170px;
        height: 100%;
        background: #3b3c3e;
        position: relative;
        overflow: hidden;
    }
    .nav-box ul.slide-bar{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }
    .nav-box ul.slide-bar li a{
        display: block;
        width: 100%;
        height: 60px;
        line-height: 60px;
        text-align: center;
        cursor: pointer;
    }
    .nav-box ul.slide-bar li a span{
        color: #adafb1;
    }
    .nav-box ul.slide-bar li a i.icon{
        float: right;
        margin: 27px 20px 0 0;
    }
    .nav-box ul.slide-bar li a:hover{
        background: #4e4e4f;
    }
    ul.second-nav li a.current{
        background: #4e4e4f;
    }
    .nav-box ul.slide-bar li a.current span{
        color: #efefef;
    }
    i.icon-updown{
        width: 9px;
        height: 6px;
        background: url(img/icons.png) no-repeat -350px -35px;}
    i.icon-right{
        width: 6px;
        height: 7px;
        background: url(img/icons.png) no-repeat -770px 0;
    }
    .current>i.icon-updown{
        background: url(img/icons.png) no-repeat -385px -35px;
    }
    .current>i.icon-right{
        background: url(img/icons.png) no-repeat -795px 0;
    }
    .nav-box ul.slide-bar li ul.second-nav{
        background: #252525;
    }
style>

js部分：

<script src="//cdn.bootcss.com/jquery/1.12.4/jquery.min.js">script>
<script type="text/javascript" src="js/jquery.mousewheel.min.js" >script>
<script>
    $(document).ready(function(){
        //导航条固定高度
        var windowH = $(window).height();
        $("#wrapper").height(windowH);
        var navBoxH = $(".nav-box").height(),
            slideBarH;
        $(".slide-bar a").on("click", function(){
            var $this = $(this);
            if($this.hasClass("first-nav")){   //一级菜单点击事件
                $(".first-nav").removeClass("current");
                $this.addClass("current");
                var secondNav = $this.next("ul.second-nav");
                if(secondNav.css("display") == "none"){
                    $("ul.second-nav").slideUp(300);
                    secondNav.slideDown(300, function(){
                        slideBarH = $(".slide-bar").height();
                        slideMove(navBoxH,slideBarH);
                    });
                }
                else{
                    secondNav.slideUp(300, function(){
                        $this.removeClass("current");
                        slideMove(1,0);
                    });
                }
            }
            else{    //二级菜单点击事件
                $(".second-nav a").removeClass("current");
                $this.addClass("current");
//                  function(){
//                      do something...
//                  }
            }
        });
    });

    //导航栏滚动
    function slideMove(parentH,sonH){
        var switch1 = 0,
            move = true,
            slideWidth = sonH - parentH,
            top;
        $(".slide-bar").off("mousewheel");  //解除绑定
        if(slideWidth > 0 && move == true){  //当菜单高度超出限定高度，绑定滚动事件
            $(".slide-bar").on("mousewheel", function(event, delta){
                top = $(this).css("top");
                if(delta == "-1" && switch1 != delta){  //滚轮向下滚动，并且不是连续向下滚动
                    move = false;  
                    $(this).stop();  //立即停止正在执行的动画
                    $(this).animate({top: -slideWidth+"px"}, 200, function(){  //执行新动画
                        move = true;
                    });
                }
                else if (delta == "1" && switch1 != delta){  //滚轮向上滚动，且不是连续向上滚动
                    move = false;
                    $(this).stop();
                    $(this).animate({top: "0"}, 200, function(){
                        move = true;
                    });
                }
                switch1 = delta;  //禁止连续同向滚动
            })
        }
        else{  //菜单高度小于限定高度时，解除绑定，回到正常位置
            $(".slide-bar").off("mousewheel");
            $('.slide-bar').animate({top: "0"}, 200);
        }

    }
script>

代码中已经详细注释，应该是没有什么难度的。

在本项目中，二级菜单数目固定，展开后不会超出一屏高度（仅指二级菜单不会超出一屏高度），向下滚动一次即可显示所有菜单，所以就做到了这个程度。

现在这个样子还是有很多欠缺的，后面还可以做到

1. 完全实现滚动条效果（小段滚动，同向滚动累加）
2. 横向滚动效果
3. 完全自定义滚动条，滚轮控制滚动

嗯，过段时间就研究…

另外，csdn怎么在文中插入演示效果呢，有大神知道的请教一下咯