最近做项目涉及到多个DIV切换效果，包括普通按钮点击切换和鼠标滚轮上下滚动切换等；其主要涉及到的内容就是鼠标滚轮上下切换的事件监听，在此记录一下；也希望能帮到各位有需要的朋友。


以下为项目实例：

<script type="text/javascript">
$(function() {
    var count = $("#sysCount").val();
    var isUp = false;
    // 初始化子系统模块
    if (count > 6) {
        $("#panel").css("width", "1200px");
        $(".line2").css("width", "550px");
        $(".hoverBtn").css("display", "block");
        for ( var i = 6; i < count; i++) {
            $("#sys" + i).css("display", "none");
        }
        $("#lastBtn").hover(function() {
            if (start != 0) {
                $(this).toggleClass("hoverBtnTog");
            }
        });
        $("#nextBtn").hover(function() {
            if (count - start != 6) {
                $(this).toggleClass("hoverBtnTog");
            }
        });
    
        //鼠标滚轮事件
        var isFirefox = navigator.userAgent.indexOf("Firefox") != -1;
        //Firefox事件：DOMMouseScroll、IE/Opera/Chrome事件：mousewheel
        var mousewheel = isFirefox ? "DOMMouseScroll" : "mousewheel";
        
        //鼠标滚动事件
        var scrollFunc = function(e) {
            e = e || window.event;
            
            //当鼠标在子系统区域内时：屏蔽窗口滚轮-滚动滚动条事件；
            //此时才调用子系统滚动方法
            if(isUp){
                e = e || window.event;
                if (e.stopPropagation) e.stopPropagation();
                else e.cancelBubble = true;
                if (e.preventDefault) e.preventDefault();
                else e.returnValue = false;
                
                if(isFirefox){
                    if (e.detail == -3) {
                        // 向上滚动
                        getLast();
                    } else {
                        // 向下滚动
                        getNext();
                    }
                }else{
                    if (e.wheelDelta == 120) {
                        // 向上滚动
                        getLast();
                    } else {
                        // 向上滚动
                        getNext();
                    }
                }
            }
        };
        
          try{
           document.addEventListener(mousewheel, scrollFunc, false);
        }catch(err){
           window.onmousewheel=document.onmousewheel=scrollFunc;
        }        
        $("#hor").mouseover(function(){
            isUp = true;
        });
        $("#hor").mouseleave(function(){
            isUp = false;
        });
    }
        
});
</script>