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 相关文章推荐
IE FF OPERA都可用的弹出层实现代码
Sep 29 Javascript
文本框输入时 实现自动提示(像百度、google一样)
Apr 05 Javascript
javascript模拟post提交隐藏地址栏的参数
Sep 03 Javascript
个人总结的一些JavaScript技巧、实用函数、简洁方法、编程细节
Jun 10 Javascript
Express的路由详解
Dec 10 Javascript
javascript从定义到执行 你不知道的那些事
Jan 04 Javascript
学习JavaScript设计模式之观察者模式
Apr 22 Javascript
使用postMesssage()实现iframe跨域页面间的信息传递
Mar 29 Javascript
jQuery EasyUI常用数据验证汇总
Sep 18 Javascript
从零学习node.js之详解异步控制工具async(八)
Feb 27 Javascript
JS监控关闭浏览器操作的实例详解
Sep 12 Javascript
vue实现计算器功能
Feb 22 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
咖啡常见的种类
2021/03/03 新手入门
php随机显示图片的简单示例
2014/02/15 PHP
Ubuntu上安装yaf扩展的方法
2018/01/29 PHP
深入研究PHP中的preg_replace和代码执行
2018/08/15 PHP
Laravel框架Eloquent ORM简介、模型建立及查询数据操作详解
2019/12/04 PHP
javascript深入理解js闭包
2010/07/03 Javascript
javascript中方便增删改cookie的一个类
2012/10/11 Javascript
杨氏矩阵查找的JS代码
2013/03/21 Javascript
javascript内置对象操作详解
2015/02/04 Javascript
jQuery实现checkbox全选的方法
2015/06/10 Javascript
jquery控制页面的展开和隐藏实现方法(推荐)
2016/10/15 Javascript
详解Node.js:events事件模块
2016/11/24 Javascript
详解jQuery简单的表单应用
2016/12/16 Javascript
JS中的phototype详解
2017/02/04 Javascript
webpack进阶——缓存与独立打包的用法
2017/08/02 Javascript
在 webpack 中使用 ECharts的实例详解
2018/02/05 Javascript
使用puppeteer破解极验的滑动验证码
2018/02/24 Javascript
微信小程序导入Vant报错VM292:1 thirdScriptError的解决方法
2019/08/01 Javascript
java实现单链表增删改查的实例代码详解
2019/08/30 Javascript
21行Python代码实现拼写检查器
2016/01/25 Python
python实现图片文件批量重命名
2020/03/23 Python
利用Python将文本中的中英文分离方法
2018/10/31 Python
PyQtGraph在pyqt中的应用及安装过程
2019/08/04 Python
python基于gevent实现并发下载器代码实例
2019/11/01 Python
tensorflow 报错unitialized value的解决方法
2020/02/06 Python
Python 通过爬虫实现GitHub网页的模拟登录的示例代码
2020/08/17 Python
一款基于css3和jquery实现的动画显示弹出层按钮教程
2015/01/04 HTML / CSS
html5 datalist标签使用示例(自动完成组件)
2014/05/04 HTML / CSS
斯福泰克软件测试面试题
2015/02/16 面试题
打架检讨书500字
2014/01/29 职场文书
意向书范本
2014/07/29 职场文书
综合素质自我评价评语
2015/03/06 职场文书
裁员通知
2015/04/25 职场文书
给学校的建议书400字
2015/09/14 职场文书
化工生产实习心得体会
2016/01/22 职场文书
导游词之沈阳植物园
2019/11/30 职场文书