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 读后台cookie代码
Sep 15 Javascript
javascrpt绑定事件之匿名函数无法解除绑定问题
Dec 06 Javascript
JS上传图片前的限制包括(jpg jpg gif及大小高宽)等
Dec 19 Javascript
jQuery中(function(){})()执行顺序的理解
Mar 05 Javascript
jQuery html()方法使用不了无法显示内容的问题
Aug 06 Javascript
JavaScript将数字转换成大写中文的方法
Mar 23 Javascript
Javascript编写俄罗斯方块思路及实例
Jul 07 Javascript
javascript文件加载管理简单实现方法
Jul 25 Javascript
JQuery的常用选择器、过滤器、方法全面介绍
May 25 Javascript
Node.js 实现简单小说爬虫实例
Nov 18 Javascript
js canvas实现放大镜查看图片功能
Jun 08 Javascript
javascript-hashchange事件和历史状态管理实例分析
Apr 18 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/10/09 PHP
php+mysql写的简单留言本实例代码
2008/07/25 PHP
PHP将DateTime对象转化为友好时间显示的实现代码
2011/09/20 PHP
深入PHP购物车模块功能分析(函数讲解,附源码)
2013/06/25 PHP
详解PHP实现定时任务的五种方法
2016/07/25 PHP
Laravel中间件实现原理详解
2016/10/09 PHP
用一段js程序来实现动画功能
2007/03/06 Javascript
JQuery读取XML文件数据并显示的实现代码
2009/12/16 Javascript
javascript qq右下角滑出窗口 sheyMsg
2010/03/21 Javascript
有关于JS构造函数的重载和工厂方法
2013/04/07 Javascript
利用div+jquery自定义滚动条样式的2种方法
2013/07/18 Javascript
js switch case default 的用法示例介绍
2013/10/23 Javascript
JS实现点击复选框将按钮或文本框变为灰色不可用的方法
2015/08/11 Javascript
AngularJS ng-app 指令实例详解
2016/07/30 Javascript
JS获取一个未知DIV高度的方法
2016/08/09 Javascript
NodeJS远程代码执行
2016/08/28 NodeJs
vue.js学习笔记之绑定style样式和class列表
2016/10/31 Javascript
用nodeJS搭建本地文件服务器的几种方法小结
2017/03/16 NodeJs
微信小程序实现滚动消息通知
2018/02/02 Javascript
最适应的vue.js的form提交涉及多种插件【推荐】
2018/08/27 Javascript
layDate日期控件使用方法详解
2018/11/15 Javascript
javascript自定义右键菜单插件
2019/12/16 Javascript
Javascript实现鼠标点击冒泡特效
2019/12/24 Javascript
使用IPython来操作Docker容器的入门指引
2015/04/08 Python
详解用python实现基本的学生管理系统(文件存储版)(python3)
2019/04/25 Python
numpy.where() 用法详解
2019/05/27 Python
利用OpenCV和Python实现查找图片差异
2019/12/19 Python
Python使用qrcode二维码库生成二维码方法详解
2020/02/17 Python
python os模块在系统管理中的应用
2020/06/22 Python
anaconda升级sklearn版本的实现方法
2021/02/22 Python
环境科学专业研究生求职信
2013/10/02 职场文书
学校法制宣传月活动总结
2014/07/03 职场文书
教育见习报告范文
2014/11/03 职场文书
zabbix agent2 监控oracle数据库的方法
2021/05/13 Oracle
SpringBoot整合Mybatis Generator自动生成代码
2021/08/23 Java/Android
搭建Yolov5服务器
2022/04/30 Servers