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级联下拉菜单以及AJAX数据验证核心代码
May 10 Javascript
js判断游览器类型及版本号的代码
May 11 Javascript
js中confirm实现执行操作前弹出确认框的方法
Nov 01 Javascript
Jquery对象和Dom对象的区别分析
Nov 20 Javascript
简单谈谈node.js 版本控制 nvm和 n
Oct 15 Javascript
使用JavaScript为Kindeditor自定义按钮增加Audio标签
Mar 18 Javascript
Bootstrap3多级下拉菜单
Feb 24 Javascript
JavaScript监听手机物理返回键的两种解决方法
Aug 14 Javascript
用jQuery将JavaScript对象转换为querystring查询字符串的方法
Nov 12 jQuery
基于vue框架手写一个notify插件实现通知功能的方法
Mar 31 Javascript
vue项目部署到nginx/tomcat服务器的实现
Aug 26 Javascript
vue data恢复初始化数据的实现方法
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
DWZ+ThinkPHP开发时遇到的问题分析
2016/12/12 PHP
Yii2 hasOne(), hasMany() 实现三表关联的方法(两种)
2017/02/15 PHP
Laravel网站打开速度优化的方法汇总
2017/07/16 PHP
laravel 5.5 关闭token的3种实现方式
2019/10/24 PHP
PHP标准库 (SPL)――Countable用法示例
2020/06/05 PHP
Dom加载让图片加载完再执行的脚本代码
2008/05/15 Javascript
百度 popup.js 完美修正版非常的不错 脚本之家推荐
2009/04/17 Javascript
解析瀑布流布局:JS+绝对定位的实现
2013/05/08 Javascript
JS求平均值的小例子
2013/11/29 Javascript
数据分析软件之FineReport教程:[5]参数界面JS(全)
2015/08/13 Javascript
javascript实现unicode与ASCII相互转换的方法
2015/12/10 Javascript
基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标
2016/01/22 Javascript
ui组件之input多选下拉实现方法(带有搜索功能)
2016/07/14 Javascript
javascript创建含数字字母的随机字符串方法总结
2016/08/01 Javascript
Javascript基于jQuery UI实现选中区域拖拽效果
2016/11/25 Javascript
js前端实现图片懒加载(lazyload)的两种方式
2017/04/24 Javascript
Vuex 使用 v-model 配合 state的方法
2018/11/13 Javascript
layui监听select变化,以及设置radio选中的方法
2019/09/24 Javascript
vue实现图片懒加载的方法分析
2020/02/05 Javascript
NestJs使用Mongoose对MongoDB操作的方法
2021/02/22 Javascript
[02:02:38]VG vs Mineski Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
基于python的Tkinter编写登陆注册界面
2017/06/30 Python
Python绑定方法与非绑定方法详解
2017/08/18 Python
用Python写王者荣耀刷金币脚本
2017/12/21 Python
python中使用iterrows()对dataframe进行遍历的实例
2018/06/09 Python
使用Python对微信好友进行数据分析
2018/06/27 Python
python实现淘宝秒杀脚本
2020/06/23 Python
python+django+rest框架配置创建方法
2019/08/31 Python
用python写测试数据文件过程解析
2019/09/25 Python
Python中logging日志记录到文件及自动分割的操作代码
2020/08/05 Python
Europcar澳大利亚官网:全球汽车租赁领域的领导者
2019/03/24 全球购物
幼儿园教师工作制度
2014/01/22 职场文书
环保建议书作文300字
2015/09/14 职场文书
在Python 中将类对象序列化为JSON
2022/04/06 Python
Redis如何实现验证码发送 以及限制每日发送次数
2022/04/18 Redis
python画条形图的具体代码
2022/04/20 Python