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 相关文章推荐
Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法
Aug 08 Javascript
javascript模拟C#格式化字符串
Aug 26 Javascript
JS实现网页Div层Clone拖拽效果
Sep 26 Javascript
JavaScript判断图片是否已经加载完毕的方法汇总
Feb 05 Javascript
jQuery代码性能优化的10种方法
Jun 21 Javascript
Angular4学习教程之DOM属性绑定详解
Jan 04 Javascript
js使用Promise实现简单的Ajax缓存
Nov 14 Javascript
Javascript的this详解
Mar 23 Javascript
JS中的算法与数据结构之集合(Set)实例详解
Aug 20 Javascript
js实现图片粘贴到网页
Dec 06 Javascript
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
Jun 01 Javascript
jQuery实现本地存储
Dec 22 jQuery
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
破解.net程序(dll文件)编译和反编译方法
2013/01/31 PHP
php用ini_get获取php.ini里变量值的方法
2015/03/04 PHP
Symfony生成二维码的方法
2016/02/04 PHP
PHP使用Redis长连接的方法详解
2018/02/12 PHP
HTML中不支持静态Expando的元素的问题
2007/03/08 Javascript
轻量级 JS ToolTip提示效果
2010/07/20 Javascript
jquery获取子节点和父节点的示例代码
2013/09/10 Javascript
使用js操作css实现js改变背景图片示例
2014/03/10 Javascript
使用JQuery在线制作ppt并在线演示源码特效
2015/09/08 Javascript
javascript帧动画(实例讲解)
2017/09/02 Javascript
完美解决mui框架off-canvas侧滑超出部分隐藏无法滚动的问题
2018/01/25 Javascript
vue better-scroll插件使用详解
2018/01/25 Javascript
JS实现仿微信支付弹窗功能
2018/06/25 Javascript
基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍
2018/08/24 Javascript
Vue使用mixin分发组件的可复用功能
2019/09/01 Javascript
微信小程序按钮点击动画效果的实现
2019/09/04 Javascript
JavaScript装箱及拆箱boxing及unBoxing用法解析
2020/06/15 Javascript
[03:48]显微镜下的DOTA2第四期——TP动作
2014/06/20 DOTA
Python pickle类库介绍(对象序列化和反序列化)
2014/11/21 Python
python文件写入实例分析
2015/04/08 Python
深入解析Python中的变量和赋值运算符
2015/10/12 Python
Python系统监控模块psutil功能与经典用法分析
2018/05/24 Python
对python多线程中互斥锁Threading.Lock的简单应用详解
2019/01/11 Python
Python生命游戏实现原理及过程解析(附源代码)
2019/08/01 Python
解决python -m pip install --upgrade pip 升级不成功问题
2020/03/05 Python
django模板获取list中指定索引的值方式
2020/05/14 Python
HTML5中form如何关闭自动完成功能的方法
2018/07/02 HTML / CSS
Cotton On美国网站:澳洲时装连锁品牌
2016/10/25 全球购物
澳大利亚香水在线:Price Rite Mart
2017/12/28 全球购物
德国最大的服装、鞋子和配件在线商店之一:Outfits24
2019/07/23 全球购物
俄罗斯外国汽车和国产汽车配件网上商店:Движком
2020/04/19 全球购物
环境工程求职简历的自我评价范文
2013/10/24 职场文书
中医专业应届生求职信
2013/11/17 职场文书
自我评价怎么写好呢?
2013/12/05 职场文书
2015教师个人工作总结范文
2015/03/31 职场文书
Mysql开启外网访问
2022/05/15 MySQL