js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)


Posted in Javascript onJanuary 14, 2014
/** Event handler for mouse wheel event. 
         *鼠标滚动事件 
         */  
        var wheel = function(event) {  
            var delta = 0;  
            if (!event) /* For IE. */  
                event = window.event;  
            if (event.wheelDelta) { /* IE/Opera. */  
                delta = event.wheelDelta / 120;  
            } else if (event.detail) {  
                /** Mozilla case. */  
                /** In Mozilla, sign of delta is different than in IE. 
                 * Also, delta is multiple of 3. 
                 */  
                delta = -event.detail / 3;  
            }  
            /** If delta is nonzero, handle it. 
             * Basically, delta is now positive if wheel was scrolled up, 
             * and negative, if wheel was scrolled down. 
             */  
            if (delta)  
                handle(delta);  
            /** Prevent default actions caused by mouse wheel. 
             * That might be ugly, but we handle scrolls somehow 
             * anyway, so don't bother here.. 
             */  
            if (event.preventDefault)  
                event.preventDefault();  
            event.returnValue = false;  
        }          /** Initialization code.  
         * If you use your own event management code, change it as required. 
         */  
        if (window.addEventListener) {  
            /** DOMMouseScroll is for mozilla. */  
            window.addEventListener('DOMMouseScroll', wheel, false);  
        }  
        /** IE/Opera. */  
        window.onmousewheel = document.onmousewheel = wheel;  
        /** This is high-level function. 
         * It must react to delta being more/less than zero. 
         */  
        var handle = function(delta) {  
            var random_num = Math.floor((Math.random() * 100) + 50);  
            if (delta < 0) {  
                // alert("鼠标滑轮向下滚动:" + delta + "次!"); // 1  
                $("btn_next_pic").onclick(random_num);  
                return;  
            } else {  
                // alert("鼠标滑轮向上滚动:" + delta + "次!"); // -1  
                $("btn_last_pic").onclick(random_num);  
                return;  
            }  
        } 
Javascript 相关文章推荐
javascript 建设银行登陆键盘
Jun 10 Javascript
jquery.alert 弹出式复选框实现代码
Jun 15 Javascript
Javascript面向对象之四 继承
Feb 08 Javascript
js面向对象编程之如何实现方法重载
Jul 02 Javascript
js Date()日期函数浏览器兼容问题解决方法
Sep 12 Javascript
详解angularJS+Ionic移动端图片上传的解决办法
Sep 13 Javascript
Vue 组件(component)教程之实现精美的日历方法示例
Jan 08 Javascript
Vue Element使用icon图标教程详解(第三方)
Feb 07 Javascript
详解vuex之store拆分即多模块状态管理(modules)篇
Nov 13 Javascript
7个好用的JavaScript技巧分享(译)
May 07 Javascript
vue elementUI 表单校验功能之数组多层嵌套
Jun 04 Javascript
vue动态配置模板 'component is'代码
Jul 04 Javascript
Eclipse下jQuery文件报错出现错误提示红叉
Jan 13 #Javascript
节点的插入之append()和appendTo()的用法介绍
Jan 13 #Javascript
移动节点的jquery代码
Jan 13 #Javascript
删除节点的jquery代码
Jan 13 #Javascript
js jquery分别实现动态的文件上传操作按钮的添加和删除
Jan 13 #Javascript
js实现的map方法示例代码
Jan 13 #Javascript
jquery教程ajax请求json数据示例
Jan 13 #Javascript
You might like
Windows PHP5和Apache的安装与配置
2009/06/08 PHP
浅析PHP中strlen和mb_strlen的区别
2014/08/31 PHP
Symfony生成二维码的方法
2016/02/04 PHP
PHP 7.1中AES加解密方法mcrypt_module_open()的替换方案
2017/10/17 PHP
PHP的mysqli_stmt_init()函数讲解
2019/01/24 PHP
纯JS实现五子棋游戏兼容各浏览器(附源码)
2013/04/24 Javascript
javascript date格式化示例
2013/09/25 Javascript
Nodejs全局安装和本地安装的不同之处
2016/07/04 NodeJs
javascript实现的全国省市县无刷新多级关联菜单效果代码
2016/08/01 Javascript
自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结
2017/08/18 Javascript
Vue2.2.0+新特性整理及注意事项
2018/08/22 Javascript
jquery拖拽自动排序插件使用方法详解
2020/07/20 jQuery
利用Vconsole和Fillder进行移动端抓包调试方法
2019/03/05 Javascript
Webpack 4如何动态切割JS注入文件名详解
2019/07/09 Javascript
vue中的v-if和v-show的区别详解
2019/09/01 Javascript
基于JavaScript实现简单抽奖功能代码实例
2020/10/20 Javascript
跟老齐学Python之做一个小游戏
2014/09/28 Python
Flask框架的学习指南之开发环境搭建
2016/11/20 Python
Python中使用多进程来实现并行处理的方法小结
2017/08/09 Python
Python 由字符串函数名得到对应的函数(实例讲解)
2017/08/10 Python
教你学会使用Python正则表达式
2017/09/07 Python
详解python中asyncio模块
2018/03/03 Python
Django 日志配置按日期滚动的方法
2019/01/31 Python
Python中的引用知识点总结
2019/05/20 Python
python的set处理二维数组转一维数组的方法示例
2019/05/31 Python
Python try except异常捕获机制原理解析
2020/04/18 Python
Python selenium实现断言3种方法解析
2020/09/08 Python
解决pycharm不能自动保存在远程linux中的问题
2021/02/06 Python
Numpy ndarray 多维数组对象的使用
2021/02/10 Python
CSS实现限制字数功能当对象内文本溢出时显示省略标记
2014/08/20 HTML / CSS
Java面向对象面试题
2016/12/26 面试题
专业销售业务员求职信
2013/11/18 职场文书
物业公司采购员岗位职责
2013/12/31 职场文书
集体婚礼证婚词
2014/01/13 职场文书
派出所所长先进事迹
2014/05/19 职场文书
2016年校园重阳节广播稿
2015/12/18 职场文书