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 相关文章推荐
js 第二代身份证号码的验证机制代码
May 12 Javascript
19个很有用的 JavaScript库推荐
Jun 27 Javascript
jQuery 下拉列表 二级联动插件分享
Mar 29 Javascript
jquery得到font-size属性值实现代码
Sep 30 Javascript
浅谈javascript中onbeforeunload与onunload事件
Dec 10 Javascript
学习JavaScript设计模式之迭代器模式
Jan 19 Javascript
js面向对象的写法
Feb 19 Javascript
js检测离开或刷新页面时表单数据是否更改的方法
Aug 02 Javascript
浅谈基于Vue.js的移动组件库cube-ui
Dec 20 Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
Nov 27 Javascript
jQuery实现每日秒杀商品倒计时功能
Sep 06 jQuery
vue2路由基本用法实例分析
Mar 06 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
PHPMailer邮件发送的实现代码
2013/05/04 PHP
CodeIgniter中实现泛域名解析
2014/07/19 PHP
PHP getName()函数讲解
2019/02/03 PHP
自己开发Dojo的建议框架
2008/09/24 Javascript
javascript在子页面中函数无法调试问题解决方法
2014/01/17 Javascript
JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)
2014/08/16 Javascript
JavaScript中字符串分割函数split用法实例
2015/04/07 Javascript
js+HTML5基于过滤器从摄像头中捕获视频的方法
2015/06/16 Javascript
JS组件Bootstrap Table表格行拖拽效果实现代码
2020/08/27 Javascript
jQuery查看选中对象HTML代码的方法
2016/06/17 Javascript
js 性能优化之算法和流程控制
2017/02/15 Javascript
jquery.flot.js简单绘制折线图用法示例
2017/03/13 Javascript
微信小程序之蓝牙的链接
2017/09/26 Javascript
使用vue的transition完成滑动过渡的示例代码
2018/06/25 Javascript
你或许不知道的一些npm实用技巧
2019/07/04 Javascript
nginx部署多个vue项目的方法示例
2020/09/06 Javascript
JavaScript读取本地文件常用方法流程解析
2020/10/12 Javascript
[19:54]夜魇凡尔赛茶话会 第一期02:看图识人
2021/03/11 DOTA
python简单文本处理的方法
2015/07/10 Python
Python 制作糗事百科爬虫实例
2016/09/22 Python
python读写json文件的简单实现
2017/04/11 Python
Python学习入门之区块链详解
2017/07/25 Python
python一行sql太长折成多行并且有多个参数的方法
2018/07/19 Python
利用python实现AR教程
2019/11/20 Python
python全局变量引用与修改过程解析
2020/01/07 Python
Python动态导入模块:__import__、importlib、动态导入的使用场景实例分析
2020/03/30 Python
15款Python编辑器的优缺点,别再问我“选什么编辑器”啦
2020/10/19 Python
CSS3模块的目前的状况分析
2010/02/24 HTML / CSS
英文版区域经理求职信
2013/10/23 职场文书
淘宝店铺营销方案
2014/02/13 职场文书
周年庆典主持词
2014/04/02 职场文书
2014年党总支工作总结
2014/12/18 职场文书
硕士毕业论文导师评语
2014/12/31 职场文书
八年级上册语文教学计划
2015/01/22 职场文书
2015秋季新学期开学寄语
2015/05/28 职场文书
失恋33天观后感
2015/06/11 职场文书