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 相关文章推荐
基于jquery的高性能td和input切换并可修改内容实现代码
Jan 09 Javascript
基于jquery实现的省市区级联无ajax
Sep 24 Javascript
js 阻止子元素响应父元素的onmouseout事件具体实现
Dec 23 Javascript
javascript中interval与setTimeOut的区别示例介绍
Mar 14 Javascript
readonly和disabled属性的区别
Jul 26 Javascript
JS实现随页面滚动显示/隐藏窗口固定位置元素
Feb 26 Javascript
Bootstrap笔记之缩略图、警告框实例详解
Mar 09 Javascript
在iframe中使bootstrap的模态框在父页面弹出问题
Aug 07 Javascript
JavaScript中EventLoop介绍
Jan 22 Javascript
浅谈Vue为什么不能检测数组变动
Oct 14 Javascript
javascript设计模式 ? 装饰模式原理与应用实例分析
Apr 14 Javascript
介绍一下28个JS常用数组方法
May 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
文件系统基本操作类
2006/11/23 PHP
详解PHP 7.4 中数组延展操作符语法知识点
2019/07/19 PHP
JavaScript触发器详解
2007/03/10 Javascript
JavaScript Date对象使用总结
2009/05/14 Javascript
js/jQuery对象互转(快速操作dom元素)
2013/02/04 Javascript
js加载之使用DOM方法动态加载Javascript文件
2013/11/08 Javascript
根据身份证号自动输出相关信息(籍贯,出身日期,性别)
2013/11/15 Javascript
完美解决IE低版本不支持call与apply的问题
2013/12/05 Javascript
利用JS判断用户是否上网(连接网络)
2013/12/23 Javascript
jQuery自动添加表单项的方法
2015/07/13 Javascript
jQuery实现的超链接提示效果示例【附demo源码下载】
2016/09/09 Javascript
JS判断浏览器是否安装flash插件的简单方法
2016/09/13 Javascript
详解JavaScript中this的指向问题
2017/01/20 Javascript
chorme 浏览器记住密码后input黄色背景处理方法(两种)
2017/11/22 Javascript
Koa2 之文件上传下载的示例代码
2018/03/29 Javascript
Javasript设计模式之链式调用详解
2018/04/26 Javascript
vue2.0 使用element-ui里的upload组件实现图片预览效果方法
2018/09/04 Javascript
微信小程序module.exports模块化操作实例浅析
2018/12/20 Javascript
[54:26]完美世界DOTA2联赛PWL S3 Forest vs Rebirth 第一场 12.10
2020/12/12 DOTA
python获取网页状态码示例
2014/03/30 Python
Python基于twisted实现简单的web服务器
2014/09/29 Python
Python实现公历(阳历)转农历(阴历)的方法示例
2017/08/22 Python
python编程嵌套函数实例代码
2018/02/11 Python
python实现简单淘宝秒杀功能
2018/05/03 Python
django框架用户权限中的session缓存到redis中的方法
2019/08/06 Python
获取Pytorch中间某一层权重或者特征的例子
2019/08/17 Python
Tkinter中复选菜单是否被选中的判断与设置方式
2020/03/04 Python
Python生成器实现简单&quot;生产者消费者&quot;模型代码实例
2020/03/27 Python
keras中的History对象用法
2020/06/19 Python
python 安装移动复制第三方库操作
2020/07/13 Python
最新Python idle下载、安装与使用教程图文详解
2020/11/28 Python
CSS3实现10种Loading效果
2016/07/11 HTML / CSS
La Senza官网:北美顶尖性感内衣品牌
2018/08/03 全球购物
学生上课迟到检讨书
2015/01/01 职场文书
Python pandas读取CSV文件的注意事项(适合新手)
2021/06/20 Python
Nginx 匹配方式
2022/05/15 Servers