function mousewheel(obj,fn){

                obj.onmousewheel===null ? obj.onmousewheel=fun : obj.addEventListener('DOMMouseScroll',fun,false);

                function fun(e){
var e=e || event,
num=0; if(e.wheelDelta){
num=e.wheelDelta>0?1:-1;
}else{
num=e.detail<0?1:-1;
}
fn(num); if(e.preventDefault)e.preventDefault();
return false;
}
}

使用方法:

            var oDiv=document.getElementById('div');

            mousewheel(oDiv,function(dir){
if(dir>0) alert('向上滚动');
if(dir<0) alert('往下滚动');
});

兼容性:ie6+吧(只测试了ie6+,chrome、Firefox)

注释一点点:

 ie/chrome: onmousewheel
   ev.wheelDelta:
      上:120
      下:-120
 
 ff: addEventListener('DOMMouseScroll',fn,false) 火狐用鼠标事件要用addEventListener绑定
  ev.detail:
     上:-3
     下:3
 
 阻止默认事件:
     return false 用于阻止一般形式的事件(如:on+事件名称)的默认行为
     ev.preventDefault() 用于阻止addEventListener绑定的事件的默认行为

封装鼠标滚轮事件_mousewheel的更多相关文章

  1. VC 鼠标滚轮事件控制绘图的问题

    问题描述: 在MFC中绘制数据曲线,通过鼠标滚轮来进行放大缩小操作.在使用滚轮事件时,发现如果数据量较大,会出现卡顿. 解决方案: 鼠标滚轮事件会进行重复绘图,考虑在鼠标滚轮结束之后再重绘: 在鼠标滚 ...

  2. js鼠标滚轮事件

    不多说,直接上代码. //非ie document.body.onmousewheel = function(event) { event = event || window.event; conso ...

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

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

  4. JavaScript中的鼠标滚轮事件详解

    JavaScript中的鼠标滚轮事件详解/*Firefox注册事件*/ ~~~Firefox: addEventListener('DOMMouseScroll', handler, false)if ...

  5. js整频滚动展示效果(函数节流鼠标滚轮事件)

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

  6. JS鼠标滚轮事件详解

    鼠标滚轮事件 //兼容性写法,该函数也是网上别人写的,不过找不到出处了,蛮好的,所有我也没有必要修改了 //判断鼠标滚轮滚动方向 if (window.addEventListener)//FF,火狐 ...

  7. js鼠标滚轮事件兼容

    JavaScript鼠标滚轮事件 IE6.0首先实现了鼠标的滚轮事件,其良好的交互效果得到认可,随后Opera.chrome.safari等主流浏览器都实现了该效果,不过存在着很大的兼容问题. 大多数 ...

  8. jQuery禁用、开启鼠标滚轮事件

    1.禁用鼠标滚轮事件 $(document).bind('mousewheel', function(event, delta) {return false;}); 2.开启鼠标滚轮事件,直接解绑事件 ...

  9. JS鼠标滚轮事件解析

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

随机推荐

  1. UIView的生命周期

    一. 大体流程: (loadView/nib)文件来加载view到内存-->viewDidLoad函数进一步初始化这些view-->内存不足时, 调用viewDidUnload函数释放vi ...

  2. soupUI生成webservice客户端代码

    在Apache网站下载axis2软件包,同时本机安装soapUI工具.例如,当前我使用的axis2版本为axis2-1.4-bin.zip,soapUI版本为3.6. Apache Axis下载地址: ...

  3. UITableView加载显示更多内容

    #import <UIKit/UIKit.h> @interface ViewController : UIViewController @end #import "ViewCo ...

  4. 结合源码看nginx-1.4.0之nginx模块组织结构详解

    目录 0. 摘要 1. nginx模块组织结构 2. nginx模块数据结构 3. nginx模块初始化 4. 一个简单的http模块 5. 小结 6. 参考资料 0. 摘要 nginx有五大优点:模 ...

  5. 2dx关于js响应layer触摸消息的bug

    cocos2dx关于js响应layer触摸消息的bug cocos2d-x 3.7 问题描述: 目前这个版本中(3.7),c++层的layer触摸消息只能通过消息的方式发送给js,不能像lua一样直接 ...

  6. 自动备份并保存最近几天的SQL数据库作业脚本

    DECLARE @filename VARCHAR(255) DECLARE @date DATETIME SELECT @date=GETDATE() SELECT @filename = 'G:\ ...

  7. Unity3d之Shader编程:子着色器、通道与标签的写法 & 纹理混合

    一.子着色器 Unity中的每一个着色器都包含一个subshader的列表,当Unity需要显示一个网格时,它能发现使用的着色器,并提取第一个能运行在当前用户的显示卡上的子着色器. 我们知道,子着色器 ...

  8. CSS3实战手册(第3版)(影印版)

    <CSS3实战手册(第3版)(影印版)> 基本信息 原书名:CSS3: The Missing Manual, 3E 作者: David Sawyer McFarland 出版社:东南大学 ...

  9. sqlserver数据库触发器和存储过程案例学习

      --创建表 create table zhuangzhan ( name ), code ) ); --往表添加一列 alter table zhuangzhan add descition in ...

  10. linux初学 :linux 常用命令(二)

    压缩和解压命令 gzip/guzip   zip/unzip   tar gzip和gunzip一般可用参数是-r,例: gzip test.txt 压缩文件 gzip -r test 压缩所有tes ...