Jquery增加鼠标中间功能mousewheel的实例代码


Posted in Javascript onSeptember 05, 2013
(function ($) {
    var types = ['DOMMouseScroll', 'mousewheel'];
    $.event.special.mousewheel = {
        setup: function () {
            if (this.addEventListener) {
                for (var i = types.length; i;) {
                    this.addEventListener(types[--i], handler, false);
                }
            } else {
                this.onmousewheel = handler;
            }
        },
        teardown: function () {
            if (this.removeEventListener) {
                for (var i = types.length; i;) {
                    this.removeEventListener(types[--i], handler, false);
                }
            } else {
                this.onmousewheel = null;
            }
        }
    };
    $.fn.extend({
        mousewheel: function (fn) {
            return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
        },
        unmousewheel: function (fn) {
            return this.unbind("mousewheel", fn);
        }
    });
    function handler(event) {
        var orgEvent = event || window.event, args = [].slice.call(arguments, 1), delta = 0, returnValue = true, deltaX = 0, deltaY = 0;
        event = $.event.fix(orgEvent);
        event.type = "mousewheel";
        // Old school scrollwheel delta
        if (event.originalEvent.wheelDelta) { delta = event.originalEvent.wheelDelta / 120; }
        if (event.originalEvent.detail) { delta = -event.originalEvent.detail / 3; }
        // New school multidimensional scroll (touchpads) deltas
        deltaY = delta;
        // Gecko
        if (orgEvent.axis !== undefined && orgEvent.axis === orgEvent.HORIZONTAL_AXIS) {
            deltaY = 0;
            deltaX = -1 * delta;
        }
        // Webkit
        if (orgEvent.wheelDeltaY !== undefined) { deltaY = orgEvent.wheelDeltaY / 120; }
        if (orgEvent.wheelDeltaX !== undefined) { deltaX = -1 * orgEvent.wheelDeltaX / 120; }
        // Add event and delta to the front of the arguments
        args.unshift(event, delta, deltaX, deltaY);
        return $.event.handle.apply(this, args);
    }
})(jQuery);
调用:
$(document).mousewheel(function (e, detail) {
}
Javascript 相关文章推荐
基于jQuery+HttpHandler实现图片裁剪效果代码(适用于论坛, SNS)
Sep 02 Javascript
仿百度的关键词匹配搜索示例
Sep 25 Javascript
Jquery中Event对象属性小结
Feb 27 Javascript
js实现带圆角的多级下拉菜单效果
Aug 28 Javascript
基于JS实现导航条之调用网页助手小精灵的方法
Jun 17 Javascript
H5移动端图片压缩上传开发流程
Nov 09 Javascript
微信小程序 自定义对话框实例详解
Jan 20 Javascript
基于JS脚本语言的基础语法详解
Jul 22 Javascript
vue-router重定向和路由别名的使用讲解
Jan 19 Javascript
JavaScript动态检测密码强度原理及实现方法详解
Jun 11 Javascript
详解简单易懂的 ES6 Iterators 指南和示例
Sep 24 Javascript
Javascript组合继承方法代码实例解析
Apr 02 Javascript
jQuery关于导航条背景切换效果实现示例
Sep 04 #Javascript
JS控制阿拉伯数字转为中文大写示例代码
Sep 04 #Javascript
JS如何将UTC格式时间转本地格式
Sep 04 #Javascript
js 窗口抖动示例
Sep 04 #Javascript
js格式化货币数据实现代码
Sep 04 #Javascript
jQuery父级以及同级元素查找介绍
Sep 04 #Javascript
jquery 添加节点的几种方法介绍
Sep 04 #Javascript
You might like
PHP学习笔记之二 php入门知识
2011/01/12 PHP
php读取csv实现csv文件下载功能
2013/12/18 PHP
访问编码后的中文URL返回404错误的解决方法
2014/08/20 PHP
php实现的pdo公共类定义与用法示例
2017/07/19 PHP
PHP使用mongoclient简单操作mongodb数据库示例
2019/02/08 PHP
Laravel 读取 config 下的数据方法
2019/10/13 PHP
jquery ajax执行后台方法
2010/03/18 Javascript
js 判断文件类型并控制表单提交示例代码
2013/11/14 Javascript
js 通用订单代码
2013/12/23 Javascript
js面向对象编程之如何实现方法重载
2014/07/02 Javascript
JavaScript转换二进制编码为ASCII码的方法
2015/04/16 Javascript
基于JS实现的随机数字抽签实例
2016/12/08 Javascript
jQuery图片轮播功能实例代码
2017/01/29 Javascript
基于JavaScript实现图片剪切效果
2017/03/07 Javascript
JS常见创建类的方法小结【工厂方式,构造器方式,原型方式,联合方式等】
2017/04/01 Javascript
详解Angular 4.x NgIf 的用法
2017/05/22 Javascript
详解基于vue的移动web app页面缓存解决方案
2017/08/03 Javascript
ionic使用angularjs表单验证(模板验证)
2018/12/12 Javascript
js 数组当前行添加数据方法详解
2020/07/28 Javascript
分享Python文本生成二维码实例
2016/01/06 Python
深入浅析python中的多进程、多线程、协程
2016/06/22 Python
Python实现抢购IPhone手机
2018/02/07 Python
python使用jieba实现中文分词去停用词方法示例
2018/03/11 Python
Python面向对象类编写细节分析【类,方法,继承,超类,接口等】
2019/01/05 Python
python实现彩色图转换成灰度图
2019/01/15 Python
python中pytest收集用例规则与运行指定用例详解
2019/06/27 Python
Python list运算操作代码实例解析
2020/01/20 Python
python math模块的基本使用教程
2021/01/16 Python
详解纯CSS3制作的20种loading动效
2017/07/05 HTML / CSS
意大利香水和化妆品购物网站:Parfimo.it
2019/10/06 全球购物
职称自我鉴定
2013/10/15 职场文书
法律专业大学生职业生涯规划书:向目标一步步迈进
2014/09/22 职场文书
女方离婚起诉书
2015/05/18 职场文书
2016年大学生就业指导课心得体会
2015/10/09 职场文书
Python 实现Mac 屏幕截图详解
2021/10/05 Python
详解MySQL中timestamp和datetime时区问题导致做DTS遇到的坑
2021/12/06 MySQL