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 相关文章推荐
ExtJS下 Ext.Direct加载和提交过程排错小结
Apr 02 Javascript
js 异步操作回调函数如何控制执行顺序
Dec 24 Javascript
怎样判断jQuery当前元素是隐藏还是显示
Nov 23 Javascript
vue.js中引入vuex储存接口数据及调用的详细流程
Dec 14 Javascript
jQuery+SpringMVC中的复选框选择与传值实例
Jan 08 jQuery
vue 过滤器filter实例详解
Mar 14 Javascript
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
Apr 13 Javascript
js实现二级菜单点击显示当前内容效果
Apr 28 Javascript
Vue列表渲染的示例代码
Nov 01 Javascript
js中async函数结合promise的小案例浅析
Apr 14 Javascript
详解新手使用vue-router传参时注意事项
Jun 06 Javascript
解决echarts中横坐标值显示不全(自动隐藏)问题
Jul 20 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
cmd下运行php脚本
2008/11/25 PHP
一个php导出oracle库的php代码
2009/04/20 PHP
PHP文件读写操作之文件写入代码
2011/01/13 PHP
js获取url参数的使用扩展实例
2007/12/29 Javascript
从父页面读取和操作iframe中内容方法
2009/07/25 Javascript
jQuery源码分析之Event事件分析
2010/06/07 Javascript
js工具方法弹出蒙版
2013/05/08 Javascript
javascript实现yield的方法
2013/11/06 Javascript
DOM基础教程之事件对象
2015/01/20 Javascript
javascript模拟命名空间
2015/04/17 Javascript
浅析jQuery 遍历函数,javascript中的each遍历
2016/05/25 Javascript
简单实现js浮动框
2016/12/13 Javascript
VUE中v-model和v-for指令详解
2017/06/23 Javascript
详解利用 Express 托管静态文件的方法
2017/09/18 Javascript
JavaScript实现音乐自动切换和轮播
2017/11/05 Javascript
vue-router源码之history类的浅析
2019/05/21 Javascript
layui复选框的全选与取消实现方法
2019/09/02 Javascript
jQuery实现全选、反选和不选功能的方法详解
2019/12/04 jQuery
小程序自定义模板实现吸顶功能
2020/01/08 Javascript
[02:30]DOTA2放量测试专访海涛:呼吁保护新手玩家
2013/08/26 DOTA
[01:02:48]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 LGD vs OG
2018/04/02 DOTA
python模块简介之有序字典(OrderedDict)
2016/12/01 Python
使用Python3 编写简单信用卡管理程序
2016/12/21 Python
详解Python中的静态方法与类成员方法
2017/02/28 Python
python实现浪漫的烟花秀
2019/01/30 Python
python 中pyqt5 树节点点击实现多窗口切换问题
2019/07/04 Python
解决python 3 urllib 没有 urlencode 属性的问题
2019/08/22 Python
利用CSS3 动画 绘画 圆形动态时钟
2018/03/20 HTML / CSS
迪卡侬英国官网:Decathlon英国
2017/04/08 全球购物
授权委托书格式模板
2014/04/03 职场文书
职业生涯规划书结束语
2014/04/15 职场文书
关于运动会的广播稿
2014/09/22 职场文书
银行贷款委托书范本
2014/10/11 职场文书
80后婚前协议书范本
2014/10/24 职场文书
感谢信模板大全
2015/01/23 职场文书
移除Selenium中window.navigator.webdriver值
2022/06/10 Python