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 简便实现页面元素数据验证功能
Mar 24 Javascript
Javascript document.referrer判断访客来源网址
May 15 Javascript
JavaScript 用cloneNode方法克隆节点的代码
Oct 15 Javascript
基于jQuery中对数组进行操作的方法
Apr 16 Javascript
原生javaScript做得动态表格(注释写的很清楚)
Dec 29 Javascript
javascript实例--教你实现扑克牌洗牌功能
May 15 Javascript
利用js实现禁止复制文本信息
Jun 03 Javascript
关于react中组件通信的几种方式详解
Dec 10 Javascript
javascript显示动态时间的方法汇总
Jul 06 Javascript
详解Vue 匿名、具名和作用域插槽的使用方法
Apr 22 Javascript
Vue 打包的静态文件不能直接运行的原因及解决办法
Nov 19 Vue.js
使用react-virtualized实现图片动态高度长列表的问题
May 28 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 socket(fsockopen)的应用实例分析
2013/06/02 PHP
php防止伪造数据从地址栏URL提交的方法
2014/08/24 PHP
js脚本学习 比较实用的基础
2006/09/07 Javascript
ExtJS 下拉多选框lovcombo
2010/05/19 Javascript
js中如何把字符串转化为对象、数组示例代码
2013/07/17 Javascript
JS检测输入字符是否包含非法字符的示例代码
2014/02/11 Javascript
js实现文本框中输入文字页面中div层同步获取文本框内容的方法
2015/03/03 Javascript
JavaScript、tab切换完整版(自动切换、鼠标移入停止、移开运行)
2016/01/05 Javascript
javascript类型系统 Array对象学习笔记
2016/01/09 Javascript
简单实现vue验证码60秒倒计时功能
2017/10/11 Javascript
easyui下拉框动态级联加载的示例代码
2017/11/29 Javascript
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
2018/10/31 Javascript
在vue里使用codemirror遇到的问题
2018/11/01 Javascript
详解用场景去理解函数柯里化(入门篇)
2019/04/11 Javascript
15分钟上手vue3.0(小结)
2020/05/20 Javascript
node运行js获得输出的三种方式示例详解
2020/07/02 Javascript
element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
2020/07/27 Javascript
js闭包的9个使用场景
2020/12/29 Javascript
Python用UUID库生成唯一ID的方法示例
2016/12/15 Python
python 多进程队列数据处理详解
2019/12/23 Python
Python基于Twilio及腾讯云实现国际国内短信接口
2020/06/18 Python
CSS3+DIV实现漂亮的动画彩色标签
2016/06/16 HTML / CSS
html5 canvas手势解锁源码分享
2020/01/07 HTML / CSS
DVF官方网站:美国时装界尊尚品牌
2017/08/29 全球购物
Nixon手表英国官网:美国尼克松手表品牌
2020/02/10 全球购物
英国现代、当代和设计师家具店:Furntastic
2020/07/18 全球购物
一套PHP的笔试题
2013/05/31 面试题
将"引用"作为函数返回值类型的格式、好处和需要遵守的规则
2016/02/09 面试题
资产经营总监岗位职责范文
2013/12/01 职场文书
运动会入场词100字
2014/02/06 职场文书
产品质量承诺书
2014/03/27 职场文书
五四青年节的活动方案
2014/08/20 职场文书
全国法院系统开展党的群众路线教育实践活动综述(全文)
2014/10/25 职场文书
商务邀请函
2015/01/30 职场文书
单位收入证明范本
2015/06/18 职场文书
机关单位2016年创先争优活动总结
2016/04/05 职场文书