最近做项目涉及到多个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();                    }                }            }        };                  try{           document.addEventListener(mousewheel, scrollFunc, false);        }catch(err){           window.onmousewheel=document.onmousewheel=scrollFunc;        }                $("#hor").mouseover(function(){            isUp = true;        });        $("#hor").mouseleave(function(){            isUp = false;        });    }        });