js鼠标滚轮上下滚动监听事件应用实例（跨浏览器，亲测）

标签：js   js鼠标滚轮事件   鼠标滚轮上下滚动事件   

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

以下为项目实例：

$(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();
                    }
                }
            }
        };
        
        document.addEventListener(mousewheel, scrollFunc, false);
        
        $("#hor").mouseover(function(){
            isUp = true;
        });
        $("#hor").mouseleave(function(){
            isUp = false;
        });
    }
        
});

js鼠标滚轮上下滚动监听事件应用实例（跨浏览器，亲测）

标签：js   js鼠标滚轮事件   鼠标滚轮上下滚动事件   

原文地址：http://jiyanle.blog.51cto.com/6932197/1576508