滚动方向区分为正负：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <script type="text/javascript">

       window.onload = function(){

           //去掉默认的contextmenu事件，否则会和右键事件同时出现。

           document.oncontextmenu = function(e){

               e.preventDefault();

           };

           document.getElementById("test").onmousedown = function(e){

               if(e.button ==2){

                   alert("你点了右键");

               }else if(e.button ==0){

                   alert("你点了左键");

               }else if(e.button ==1){

                   alert("你点了滚轮");

               }

           }

       }

    </script>

</head>

<body>

 <label for="wheelDelta">滚动值:</label>(IE/Opera)<input type="text" id="wheelDelta"/>

<label for="detail">滚动值:(Firefox)</label><input type="text" id="detail"/>

<script type="text/javascript">

var scrollFunc=function(e){

    ee=e || window.event;

    var t1=document.getElementById("wheelDelta");

    var t2=document.getElementById("detail");

    if(e.wheelDelta){//IE/Opera/Chrome

        t1.value=e.wheelDelta;

    }else if(e.detail){//Firefox

        t2.value=e.detail;

    }

}

/*注册事件*/

if(document.addEventListener){

    document.addEventListener('DOMMouseScroll',scrollFunc,false);

}//W3C

window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome

</script>

<div style="width: 400px;height:400px;margin:auto;border:1px solid pink" id="test"></div>

</body>

</html>

　　

js 捕捉滚轮的滚动的更多相关文章

  1. js鼠标滚轮滚动图片切换效果

    效果体验网址:http://keleyi.com/keleyi/phtml/image/12.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...

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

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

  3. JS鼠标滚轮事件解析

    一.不同浏览器的鼠标滚轮事件 首先,不同的浏览器有不同的滚轮事件.主要是有两种,onmousewheel(IE/Opera/Chrome支持,firefox不支持)和DOMMouseScroll(只有 ...

  4. Sequence.js 实现带有视差滚动特效的图片滑块

    Sequence.js 功能齐全,除了能实现之前分享过的现代的图片滑动效果,还可以融合当前非常流行的视差滚动(Parallax Scrolling)效果.让多层背景以不同的速度移动,形成立体的运动效果 ...

  5. js点击左右滚动+默认自动滚动类

    js点击左右滚动+默认自动滚动类 点击下载

  6. js 实现单行文本滚动效果

    js 代码如下: /***************滚动场次开始*****************/ function ScrollText(content, btnPrevious, btnNext, ...

  7. js 实现文字列表滚动效果

    今天要实现抽奖名单在首页滚动展示的效果,就用js写了一个,代码如下: html代码: <style type="text/css"> *{margin:;padding ...

  8. js捕捉IE窗口失去焦点事件,判断离开页面刷新或关闭的方法

    js捕捉IE窗口失去焦点事件,判断离开页面刷新或关闭的方法 javascript如何捕捉IE窗口失去焦点事件window.onblur = function(e) { //you code}; 弹框的 ...

  9. js标题文字向上滚动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

随机推荐

  1. JavaScrip总体

    js: 简单对象: 数字 | 字符串 | 这三个像对象,有方法,但不可变 布尔值 | null undefined 对象:无类型,k-v对集合:函数.数组.REG.... JavaScript是一种l ...

  2. html04

    web的三要素:HTML:搭建页面的基本结构css: 对页面进行修饰-让页面更美观JavaScript:让页面可以有交互行为(用户和界面)1.js是什么:JavaScript :页面的脚本语言,运行在 ...

  3. Qt事件过滤器和事件的发送

    事件过滤器 /* *事件过滤器不是类,仅仅是QObject类的两个函数:installEventFilter() 和 eventFilter() . *下面讲个例子: * 监视过滤 textEdit的 ...

  4. Docker深入浅出2

    Docker系统架构 Docker使用客户端-服务端(c/s)架构模式,使用远程api来管理和创建Docker容器. docker容器通过Docker镜像来创建. 容器与镜像的关系类似于面向对象编程中 ...

  5. acrobat pro 无法编辑个别文本

    在修改pdf文档时出现个别文字选取不上,无法修改,如图中4-2626没有选中 解决方法如图 此后可以直接修改文本了

  6. 《Convolutional Neural Network Architectures for Matching Natural Language Sentences》句子匹配

    模型结构与原理 1. 基于CNN的句子建模 这篇论文主要针对的是句子匹配(Sentence Matching)的问题,但是基础问题仍然是句子建模.首先,文中提出了一种基于CNN的句子建模网络,如下图: ...

  7. 无法在web服务器下启动调试

    VS2013 编译时异常 无法在web服务器下启动调试.该Web服务器未及时响应   VS2013 编译时错误 无法在web服务器上启动调试.该Web服务器未及时响应.无法在web服务器上启动调试.该 ...

  8. 使用IDEA 搭建SpringMVC +Easyui 实现最简单的数据展示功能

    效果图如下: 步骤如下: 1.导入jquery-easyui-1.5.5.6 2.导入相关的SpringMVC 的jar 包 3.编写datagrid.jsp 页面 <%-- Created b ...

  9. linux常用命令：killall 命令

    killall命令用进程的名字来杀死进程. 1.命令格式:    killall [ -egiqvw ] [ -signal ] [进程名称] 格式:killall -<signame> ...

  10. python import win32clipboard 报错DLL load failed: %1 不是有效的 Win32 应用程序。

    在python中引入win32clipboard时报错,DLL load failed: %1 不是有效的 Win32 应用程序 >>> import win32clipboardT ...