js鼠标滑轮滚动事件绑定(兼容主流浏览器)
程序员文章站
2023-12-22 09:06:52
...
/** Event handler for mouse wheel event. *鼠标滚动事件 */ var wheel = function(event) { var delta = 0; if (!event) /* For IE. */ event = window.event; if (event.wheelDelta) { /* IE/Opera. */ delta = event.wheelDelta / 120; } else if (event.detail) { /** Mozilla case. */ /** In Mozilla, sign of delta is different than in IE. * Also, delta is multiple of 3. */ delta = -event.detail / 3; } /** If delta is nonzero, handle it. * Basically, delta is now positive if wheel was scrolled up, * and negative, if wheel was scrolled down. */ if (delta) handle(delta); /** Prevent default actions caused by mouse wheel. * That might be ugly, but we handle scrolls somehow * anyway, so don't bother here.. */ if (event.preventDefault) event.preventDefault(); event.returnValue = false; } /** Initialization code. * If you use your own event management code, change it as required. */ if (window.addEventListener) { /** DOMMouseScroll is for mozilla. */ window.addEventListener('DOMMouseScroll', wheel, false); } /** IE/Opera. */ window.onmousewheel = document.onmousewheel = wheel; /** This is high-level function. * It must react to delta being more/less than zero. */ var handle = function(delta) { var random_num = Math.floor((Math.random() * 100) + 50); if (delta < 0) { // alert("鼠标滑轮向下滚动:" + delta + "次!"); // 1 $("btn_next_pic").onclick(random_num); return; } else { // alert("鼠标滑轮向上滚动:" + delta + "次!"); // -1 $("btn_last_pic").onclick(random_num); return; } }
推荐阅读
-
js鼠标滑轮滚动事件绑定(兼容主流浏览器)
-
js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器_javascript技巧
-
js 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome)_javascript技巧
-
兼容浏览器的js事件绑定函数(详解)
-
js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器_javascript技巧
-
滚动条响应鼠标滑轮事件实现上下滚动的js代码_javascript技巧
-
js 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome)_javascript技巧
-
滚动条响应鼠标滑轮事件实现上下滚动的js代码_javascript技巧
-
原生JS绑定滑轮滚动事件兼容常见浏览器_javascript技巧
-
js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)_javascript技巧