最近做项目涉及到多个DIV切换效果，包括普通按钮点击切换和鼠标滚轮上下滚动切换等；其主要涉及到的内容就是鼠标滚轮上下切换的事件监听，在此记录一下；也希望能帮到各位有需要的朋友。
以下为项目实例：
$(function(){
varcount=$("#sysCount").val();
varisUp=false;
//初始化子系统模块
if(count>6){
$("#panel").css("width","1200px");
$(".line2").css("width","550px");
$(".hoverBtn").css("display","block");
for(vari=6;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");
}
});
//鼠标滚轮事件
varisFirefox=navigator.userAgent.indexOf("Firefox")!=-1;
//Firefox事件：DOMMouseScroll、IE/Opera/Chrome事件：mousewheel
varmousewheel=isFirefox?"DOMMouseScroll":"mousewheel";
//鼠标滚动事件
varscrollFunc=function(e){
e=e||window.event;
//当鼠标在子系统区域内时：屏蔽窗口滚轮-滚动滚动条事件；
//此时才调用子系统滚动方法
if(isUp){
e=e||window.event;
if(e.stopPropagation)e.stopPropagation();
elsee.cancelBubble=true;
if(e.preventDefault)e.preventDefault();
elsee.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;
});
}
});
如果觉得《html鼠标滑轮事件 js鼠标滚轮上下滚动监听事件应用实例（跨浏览器 亲测）》对你有帮助，请点赞、收藏，并留下你的观点哦！
