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. 1.4.2 solr字段类型--(1.4.2.5)使用枚举字段

    1.4.2 solr字段类型 (1.4.2.1) 字段类型定义和字段类型属性. (1.4.2.2) solr附带的字段类型 (1.4.2.3) 使用货币和汇率 (1.4.2.4) 使用Dates(日期 ...

  2. Solr DIH dataconfig配置

    1. 配置文件data-config.xml定义了数据库的基本配置,以及导出数据的映射规则,即导出数据库表中对应哪些字段的值,以及对特定字段的值做如何处理 </pre><p>& ...

  3. Java Set接口

    Set 集合不能包含重复的元素的集合.该模型数学抽象集合. Set接口只包含继承自Collection的方法,并增加了重复的元素被禁止约束性. 集还增加了对equals和hashCode操作的行为更强 ...

  4. OC之property和自动释放池

    property实例 property参数 自动释放池 一.property实例 1.前边的例子我们看到,我们在一个类中如果用到另外一个类的实例作为自己的成员变量时,通常需要在setter方法中,先r ...

  5. BI中PowerDesigner建模

    PowerDesigner下载: http://pan.baidu.com/share/link?shareid=296749&uk=1479845243

  6. self.view添加UIView时添加动画

    CATransition *animation = [CATransition animation]; animation.delegate = self; animation.duration = ...

  7. asp.net(c#)网页跳转七种方法小结

    在asp.net下,经常需要页面的跳转,下面是具体的几种方法.跳转页面是大部编辑语言中都会有的,正面我们来分别介绍一下关于.net中response.redirect sever.execute se ...

  8. iOS - 移动设备防丢失App

    一.原理 二.数据获取 三.报警

  9. 关于C# webform 项目发布 aspx页面无任何代码 每个页面都以dll形式发布

    关于C# webform 项目发布 注意:aspx页面无任何代码,每个页面都以dll形式发布带bin文件夹里 具体操作方法如下图:

  10. JS字符串截取

    substr 方法返回一个从指定位置开始的指定长度的子字符串. stringvar.substr(start [, length ]) 参数stringvar 必选项.要提取子字符串的字符串文字或 S ...