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;
});
}
});
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。