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 相关文章推荐
判断是否输入完毕再激活提交按钮
Jun 26 Javascript
JS按字节截取字符长度实例
Nov 20 Javascript
JavaScript二维数组实现的省市联动菜单
May 08 Javascript
Javascript基础知识(一)核心基础语法与事件模型
Sep 29 Javascript
JavaScript实现单击下拉框选择直接跳转页面的方法
Jul 02 Javascript
jQuery获取select选中的option的value值实现方法
Aug 29 Javascript
js将table的每个td的内容自动赋值给其title属性的方法
Oct 13 Javascript
node.js中fs.stat与fs.fstat的区别详解
Jun 01 Javascript
React应用中使用Bootstrap的方法
Aug 15 Javascript
Node.js学习之查询字符串解析querystring详解
Sep 28 Javascript
用jQuery将JavaScript对象转换为querystring查询字符串的方法
Nov 12 jQuery
jQuery实现鼠标滑动切换图片
May 27 jQuery
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
提问的智慧
2006/10/09 PHP
用PHP控制用户的浏览器--ob*函数的使用说明
2007/03/16 PHP
php 中文处理函数集合
2008/08/27 PHP
IE8 下的Js错误HTML Parsing Error...
2009/08/14 Javascript
如何确保JavaScript的执行顺序 之实战篇
2011/03/03 Javascript
ajax 同步请求和异步请求的差异分析
2011/07/04 Javascript
passwordStrength 基于jquery的密码强度检测代码使用介绍
2011/10/08 Javascript
js实现屏幕自适应局部代码分享
2015/01/30 Javascript
JavaScript常用基础知识强化学习
2015/12/09 Javascript
AngularJS基础 ng-non-bindable 指令详细介绍
2016/08/02 Javascript
基于jquery实现的银行卡号每隔4位自动插入空格的实现代码
2016/11/22 Javascript
jQuery实现倒计时重新发送短信验证码功能示例
2017/01/12 Javascript
JS实现的倒计时恢复按钮点击功能【可用于协议阅读倒计时】
2018/04/19 Javascript
使用layui实现的左侧菜单栏以及动态操作tab项方法
2019/09/10 Javascript
Vue在chrome44偶现点击子元素事件无法冒泡的解决方法
2019/12/15 Javascript
讲解Python中的标识运算符
2015/05/14 Python
详解python之配置日志的几种方式
2017/05/22 Python
Python实现的随机森林算法与简单总结
2018/01/30 Python
python获取服务器响应cookie的实例
2018/12/28 Python
python 计算一个字符串中所有数字的和实例
2019/06/11 Python
在pycharm中为项目导入anacodna环境的操作方法
2020/02/12 Python
python 中不同包 类 方法 之间的调用详解
2020/03/09 Python
bareMinerals官网:矿物质化妆品和护肤品
2018/02/04 全球购物
伦敦一卡通:The London Pass
2018/11/30 全球购物
安全生产先进个人材料
2014/02/06 职场文书
学生会离职感言
2014/02/11 职场文书
《小草和大树》教学反思
2014/02/16 职场文书
班级德育工作实施方案
2014/02/21 职场文书
单位工程竣工验收方案
2014/03/16 职场文书
《北京的春节》教学反思
2014/04/07 职场文书
文秘个人求职信范文
2014/04/22 职场文书
教导主任竞聘演讲稿
2014/05/16 职场文书
学校先进集体事迹材料
2014/05/31 职场文书
天坛导游词
2015/02/02 职场文书
利用Java设置Word文本框中的文字旋转方向的实现方法
2021/06/28 Java/Android
Python卷积神经网络图片分类框架详解分析
2021/11/07 Python