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 相关文章推荐
实现复选框全选/全不选切换
Dec 23 Javascript
JQuery Tab选项卡效果代码改进版
Apr 01 Javascript
Google排名中的10个最著名的 JavaScript库
Apr 27 Javascript
始终在屏幕中间显示Div的代码(css+js)
Mar 10 Javascript
Jquery为单选框checkbox绑定单击click事件
Dec 18 Javascript
js sort 二维数组排序的用法小结
Jan 24 Javascript
javascript实现起伏的水波背景效果
May 16 Javascript
Angular2内置指令NgFor和NgIf详解
Aug 03 Javascript
javascript基础进阶_深入剖析执行环境及作用域链
Sep 05 Javascript
js实现mp3录音通过websocket实时传送+简易波形图效果
Jun 12 Javascript
vue element 关闭当前tab 跳转到上一路由操作
Jul 22 Javascript
vue用elementui写form表单时,在label里添加空格操作
Aug 13 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下删除字符串中HTML标签的函数
2008/08/27 PHP
php上传图片到指定位置路径保存到数据库的具体实现
2013/12/30 PHP
分享10段PHP常用代码
2015/11/11 PHP
老司机传授Ubuntu下Apache+PHP+MySQL环境搭建攻略
2016/03/20 PHP
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(下:动画篇)
2010/03/24 Javascript
50个比较实用jQuery代码段
2011/09/18 Javascript
简单的前端js+ajax 购物车框架(入门篇)
2011/10/29 Javascript
浅析JavaScript中的常用算法与函数
2013/11/21 Javascript
开发插件的两个方法jquery.fn.extend与jquery.extend
2013/11/21 Javascript
jquery通过load获取文件的内容并跳到锚点的方法
2015/01/29 Javascript
Node.js中的流(Stream)介绍
2015/03/30 Javascript
简介JavaScript中strike()方法的使用
2015/06/08 Javascript
jquery实现通用的内容渐显Tab选项卡效果
2015/09/07 Javascript
Sea.JS知识总结
2016/05/05 Javascript
Node.js上传文件功能之服务端如何获取文件上传进度
2018/02/05 Javascript
JavaScript之实现一个简单的Vue示例
2019/01/17 Javascript
layUI实现前端分页和后端分页
2019/07/27 Javascript
python基础教程之简单入门说明(变量和控制语言使用方法)
2014/03/25 Python
用Python将动态GIF图片倒放播放的方法
2016/11/02 Python
sublime text 3配置使用python操作方法
2017/06/11 Python
Python PyAutoGUI模块控制鼠标和键盘实现自动化任务详解
2018/09/04 Python
python批量读取文件名并写入txt文件中
2020/09/05 Python
关于pytorch多GPU训练实例与性能对比分析
2019/08/19 Python
Python FtpLib模块应用操作详解
2019/12/12 Python
基于spring boot 日志(logback)报错的解决方式
2020/02/20 Python
python中sys模块是做什么用的
2020/08/16 Python
Nordgreen台湾官网:极简北欧设计手表
2019/08/21 全球购物
数控专业大学生的自我鉴定
2013/11/13 职场文书
《月光启蒙》教学反思
2014/03/01 职场文书
安全标语口号
2014/06/09 职场文书
党的群众路线教育实践活动个人对照检查剖析材料
2014/09/23 职场文书
2014年学校团委工作总结
2014/12/20 职场文书
2015仓库保管员年终工作总结
2015/05/13 职场文书
七年级上册生物的课件
2019/08/07 职场文书
导游词之南京夫子庙
2019/12/09 职场文书
微信小程序基础教程之echart的使用
2021/06/01 Javascript