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 相关文章推荐
java和javascript获取word文档的书签位置对比
Jun 19 Javascript
extjs 时间范围选择自动判断的实现代码
Jun 24 Javascript
jquery ui resize 中border-box的bug修正
Apr 26 Javascript
JavaScript中Number.MAX_VALUE属性的使用方法
Jun 04 Javascript
AngularJS初始化静态模板详解
Jan 14 Javascript
JS控制文本域只读或可写属性的方法
Jun 24 Javascript
浅谈struts1 &amp; jquery form 文件异步上传
May 25 jQuery
图文介绍Vue父组件向子组件传值
Feb 17 Javascript
jQuery仿移动端支付宝键盘的实现代码
Aug 15 jQuery
详解angularjs跨页面传参遇到的一些问题
Nov 01 Javascript
JS如何判断对象是否包含某个属性
Aug 29 Javascript
解决ant-design-vue中menu菜单无法默认展开的问题
Oct 31 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
基于mysql的论坛(7)
2006/10/09 PHP
php str_pad 函数使用详解
2009/01/13 PHP
php中如何同时使用session和cookie来保存用户登录信息
2013/07/05 PHP
php 批量替换html标签的实例代码
2013/11/26 PHP
WordPress中用于获取及自定义头像图片的PHP脚本详解
2015/12/17 PHP
Jquery调用webService远程访问出错的解决方法
2010/05/21 Javascript
LazyLoad 延迟加载(按需加载)
2010/05/31 Javascript
jquery学习笔记 用jquery实现无刷新登录
2011/08/08 Javascript
jQuery实现的简单折叠菜单(折叠面板)效果代码
2015/09/16 Javascript
JS中split()用法(将字符串按指定符号分割成数组)
2016/10/24 Javascript
C#微信小程序服务端获取用户解密信息实例代码
2017/03/10 Javascript
微信小程序 引入es6 promise
2017/04/12 Javascript
nodejs制作爬虫实现批量下载图片
2017/05/19 NodeJs
迅速了解一下ES10中Object.fromEntries的用法使用
2019/03/05 Javascript
Vue实现导航栏点击当前标签变色功能
2020/08/19 Javascript
vue将文件/图片批量打包下载zip的教程
2020/10/21 Javascript
详解Typescript里的This的使用方法
2021/01/08 Javascript
[52:00]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 LGD vs Optic
2018/04/02 DOTA
python插入排序算法实例分析
2015/07/03 Python
深入解析Python编程中super关键字的用法
2016/06/24 Python
python 读取excel文件生成sql文件实例详解
2017/05/12 Python
使用Python获取网段IP个数以及地址清单的方法
2018/11/01 Python
在python中pandas读文件,有中文字符的方法
2018/12/12 Python
django celery redis使用具体实践
2019/04/08 Python
Python基于字典实现switch case函数调用
2020/07/22 Python
Python面向对象多态实现原理及代码实例
2020/09/16 Python
意大利会呼吸的鞋:Geox健乐士
2017/02/12 全球购物
安踏官方商城:anta.cn
2019/12/16 全球购物
AJAX的全称是什么
2012/11/06 面试题
实习生自我鉴定
2013/12/12 职场文书
2014年健康教育实施方案
2014/02/17 职场文书
《风筝》教学反思
2014/04/10 职场文书
反邪教警示教育方案
2014/05/13 职场文书
债务纠纷委托书范本
2014/10/14 职场文书
2015团员个人年度总结
2015/11/24 职场文书
Python集合set()使用的方法详解
2022/03/18 Python