js 判断鼠标滚轮方向

最近因为公司项目的要求,需要做页面的全屏滚动切换效果。

页面的切换,需要脚本监听鼠标滑轮的滚动事件,来判断页面是向上切换or向下切换.

这里的脚本很简单,我就直接贴出来吧。

 1 $(‘html‘).on(‘mousewheel DOMMouseScroll‘, function (e) {
 2                 e.preventDefault();
 3                 var t = new Date().getTime();
 4                 //防止鼠标滚动太快
 5                 if (t - Const.scrollTime < 1400) {
 6                     return !1;
 7                 }
 8                 Const.scrollTime = t;
 9
10                 //鼠标滚轮的滚动方向 >0 up;<0 down
11                 var _delta = parseInt(e.originalEvent.wheelDelta || -e.originalEvent.detail);
12                 if (_delta > 0) {
13                     //Scroll.up();
14                 } else {
15                    Scroll.down();
16                 }
17             });

这里需要注意的一点就是e.originalEvent。

如果使用jQuery来进行事件绑定,在事件回调的参数中e是被jQuery重新封装的,所以我们必须使用e.originalEvent来指向原始的事件对象,就是这样任性。

时间: 2024-10-06 02:55:50

js 判断鼠标滚轮方向的相关文章

js中判断鼠标滚轮方向的方法

  前  言 LiuDaP 最近无聊,在做自己的个人站,其中用到了一个关于鼠标滚轮方向判断的方法,今天闲来无聊,就给大家介绍一下吧!!!! 在介绍鼠标事件案例前,让我们先稍微了解一下js中的event对象 一.JS中的Event对象 Event对象:它代表的是事件的状态,例如可以表示鼠标的位置.鼠标按钮的状态.键盘按键的状态等等. >>>事件通常与函数结合使用,函数不会在事件发生前被执行! 二.JS中如何判断鼠标滚轮方向 判断鼠标滚轮的方向,有着两个派别:一是谷歌.IE派别(这次IE没有

js判断鼠标滚动方向

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta h

JS 判断鼠标滚轮的上下滚动

<script type="text/javascript"> var scrollFunc = function (e) { e = e || window.event; if (e.wheelDelta) { //判断浏览器IE,谷歌滑轮事件 if (e.wheelDelta > 0) { //当滑轮向上滚动时 alert("滑轮向上滚动"); } if (e.wheelDelta < 0) { //当滑轮向下滚动时 alert(&quo

js中鼠标滚轮事件详解

(以下内容部分内容参考了http://adomas.org/javascript-mouse-wheel/ ) 之前js 仿Photoshop鼠标滚轮控制输入框取值中已使用js对鼠标滚轮事件进行控制,滚轮事件其中考虑浏览器兼容性问题 附加事件 其中经我测试,IE/Opera属于同一类型,使用attachEvent即可添加滚轮事件. /*IE注册事件*/ if(document.attachEvent){ document.attachEvent('onmousewheel',scrollFunc

javaScript判断鼠标滚轮的上下滚动

分享一个js实现判断鼠标滚轮的上下滚动: 1 <script type="text/javascript"> 2 var scrollFunc = function (e) { 3 e = e || window.event; 4 if (e.wheelDelta) { //判断浏览器IE,谷歌滑轮事件 5 if (e.wheelDelta > 0) { //当滑轮向上滚动时 6 alert("滑轮向上滚动"); 7 } 8 if (e.wheel

JS判断鼠标移入元素的方向

最终效果 这里的关键主要是判断鼠标是从哪个方向进入和离开的 $("li").on("mouseenter mouseleave",function(e) { var w = this.offsetWidth; var h = this.offsetHeight; var x = e.pageX - this.getBoundingClientRect().left - w/2; var y = e.pageY - this.getBoundingClientRect

js判断鼠标是否停止移动

本程序实现当鼠标在一个特定的div内悬停n秒时,判断出已经停止移动. 思路: 1.定义全局变量鼠标移动状态imouse,定时器timer.当鼠标在div内移动时,imouse值为1,相反静止时值为0:timer可以实现每过n秒就判断鼠标状态,然后把imouse重置为0: 2.div监听onmouseover.当鼠标进入区域时,就设置定时器: 3.div监听onmousemove.当鼠标移动时,设置imouse值为1: 4.div监听onmouseout.当鼠标离开时,清除定时器timer <ht

js判断鼠标位置是否在某个div中

div的onmouseout事件让div消失时,会出现这样的情况,就是当鼠标移至div中的其它内容时,此时也判定为离开div,会触发 onmouseout事件,这样div中的内容就不能操作了.解决的办法是当触发onmouseout事件时,先判断鼠标是否在div内,如果在,说明鼠 标并没有离开div,就不删除div,否则,删除之.OK,现在问题解决了. 就是找到该div左上角和右下角坐标,判断鼠标的坐标是否在这一区域就可以了. [javascript] view plaincopyprint? d

使用JS实现鼠标滚轮事件

网站需要实现鼠标滚轮滚一下,页面向下滑向下一个锚点,由于前面有个一样式必须用jQuery1.3.2,而好多滚轮事件都使用了更高版本的jQuery,于是就从网上找了找 <script type="text/javascript"> var sel_index = -1 var sel_max = $(".billboard-hero").length - 1; function handle(delta) { var s = delta + ":