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

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

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

 $('html').on('mousewheel DOMMouseScroll', function (e) {
e.preventDefault();
var t = new Date().getTime();
//防止鼠标滚动太快
if (t - Const.scrollTime < 1400) {
return !1;
}
Const.scrollTime = t; //鼠标滚轮的滚动方向 >0 up;<0 down
var _delta = parseInt(e.originalEvent.wheelDelta || -e.originalEvent.detail);
if (_delta > 0) {
//Scroll.up();
} else {
Scroll.down();
}
});

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

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

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

  1. js/jq判断鼠标滚轮方向

    js判断鼠标滚轮方向: var scrollFunc = function (e) { e = e || window.event; if (e.wheelDelta) { //判断浏览器IE,谷歌滑 ...

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

      前  言 LiuDaP 最近无聊,在做自己的个人站,其中用到了一个关于鼠标滚轮方向判断的方法,今天闲来无聊,就给大家介绍一下吧!!!! 在介绍鼠标事件案例前,让我们先稍微了解一下js中的event ...

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

    JS 判断鼠标滚轮的上下滚动   <script type="text/javascript"> var scrollFunc = function (e) { e = ...

  4. js 判断鼠标进去方向

    function fx(id){ var obj= document.getElementById(id); var fun=function(e){ var w=obj.offsetWidth; v ...

  5. JS判断鼠标从什么方向进入一个容器

    偶然将想到的一个如何判断鼠标从哪个方向进入一个容器的问题.首先想到的是给容器的四个边添加几个块,然后看鼠标进入的时候哪个块先监听到鼠标事件.不过这样麻烦太多了.google了一下找到了一个不错的解决方 ...

  6. JS如何判断鼠标滚轮向上还是向下滚动

    前几天偶然看到某前端群有人在问:JS如何判断鼠标滚轮向上还是向下滚动? 我想了想,有点蒙蔽,心想难道不是用scrollTop来判断吗? 但我不确定,也出于好奇心,于是开始了一番探索 思路:通过even ...

  7. js中鼠标滚轮事件详解

    js中鼠标滚轮事件详解   (以下内容部分内容参考了http://adomas.org/javascript-mouse-wheel/ ) 之前js 仿Photoshop鼠标滚轮控制输入框取值中已使用 ...

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

    分享一个js实现判断鼠标滚轮的上下滚动: <script type="text/javascript"> var scrollFunc = function (e) { ...

  9. JS判断鼠标向上滚动还是向下滚动

    js如何判断滚轮的上下滚动,我们应该都见到过这种效果,用鼠标滚轮实现某个表单内的数字向上滚动就增加,向下滚动就减少的操作,这种效果是通过js对鼠标滚轮的事件监听来实现的.今天简单的研究了一下如何使用j ...

随机推荐

  1. 【poj2942】 Knights of the Round Table

    http://poj.org/problem?id=2942 (题目链接) 题意 有n个骑士要去参加圆桌会议,他们将围成一圈,想要他们不打架,当且仅当参加圆桌会议的骑士数为奇数并且相邻的两个骑士不互相 ...

  2. GPU keylogger && GPU Based rootkit(Jellyfish rootkit)

    catalog . OpenCL . Linux DMA(Direct Memory Access) . GPU rootkit PoC by Team Jellyfish . GPU keylogg ...

  3. Handlers

    示例: - name: Configure webserver with nginx and tls hosts: webservers sudo: True vars: conf_file: /et ...

  4. runtime - Method详细笔记

    Runtime中Method详细介绍 1.找到它,认识它 //*> 在objc/runtime.h中定义了Method类型,Method是一个objc_method结构体指针,结构体中包含SEL ...

  5. 机器学习实战------利用logistics回归预测病马死亡率

    大家好久不见,实战部分一直托更,很不好意思.本文实验数据与代码来自机器学习实战这本书,倾删. 一:前期代码准备 1.1数据预处理 还是一样,设置两个数组,前两个作为特征值,后一个作为标签.当然这是简单 ...

  6. Android中如何使用Intent在Activity之间传递对象[使用Serializable或者Parcelable]

    http://blog.csdn.net/cjjky/article/details/6441104 在Android中的不同Activity之间传递对象,我们可以考虑采用Bundle.putSeri ...

  7. url下载网页的三种方法

    # -*- coding: utf-8 -*- import cookielib import urllib2 url = "http://www.baidu.com" print ...

  8. MySQL学习笔记——存储过程

  9. JS实现表格排序

    今天有点闲,写个小东西,使用JS实现点击表格标题栏实现自动排序功能,嘻嘻... 一.JS代码,文件名为code.js如下: (function($){ //插件 $.extend($,{ //命名空间 ...

  10. 使用ASP.NET Web Api构建基于REST风格的服务实战系列教程【十】——使用CacheCow和ETag缓存资源

    系列导航地址http://www.cnblogs.com/fzrain/p/3490137.html 前言 本文将使用一个开源框架CacheCow来实现针对Http请求资源缓存,本文主要介绍服务器端的 ...