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 validate使用攻略 第四步
Jul 01 Javascript
js新闻滚动 js如何实现新闻滚动效果
Jan 07 Javascript
javascript从image转换为base64位编码的String
Jul 29 Javascript
JavaScript实现下拉菜单的显示和隐藏
Jan 05 Javascript
jQuery动态添加可拖动元素完整实例(附demo源码下载)
Jun 21 Javascript
Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)
Jul 03 Javascript
JavaScript实现仿Clock ISO时钟
Jun 29 Javascript
Three.js实现3D机房效果
Dec 30 Javascript
Bootstarp在pycharm中的安装及简单的使用方法
Apr 19 Javascript
详解vue中移动端自适应方案
May 05 Javascript
Angular如何由模板生成DOM树的方法
Dec 23 Javascript
react-router-dom 嵌套路由的实现
May 02 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
PHP Socket 编程
2010/04/09 PHP
php框架CodeIgniter主从数据库配置方法分析
2018/05/25 PHP
Yii框架引入coreseek分页功能示例
2019/02/08 PHP
Jquery+ajax请求data显示在GridView上(asp.net)
2010/08/27 Javascript
node.js中的buffer.Buffer.isBuffer方法使用说明
2014/12/14 Javascript
javascript限制文本框输入值类型的方法
2015/05/07 Javascript
AngularJS的表单使用详解
2015/06/17 Javascript
Bootstrap轮播加上css3动画,炫酷到底!
2015/12/22 Javascript
微信小程序中的swiper组件详解
2017/04/14 Javascript
浅谈angularJS的$watch失效问题的解决方案
2017/08/11 Javascript
Vue中的methods、watch、computed的区别
2018/11/26 Javascript
Vue利用Blob下载原生二进制数组文件
2019/09/25 Javascript
jQuery实现可编辑的表格
2019/12/11 jQuery
Element Card 卡片的具体使用
2020/07/26 Javascript
python中找出numpy array数组的最值及其索引方法
2018/04/17 Python
Python利用splinter实现浏览器自动化操作方法
2018/05/11 Python
Python subprocess模块常见用法分析
2018/06/12 Python
Windows下python3.6.4安装教程
2018/07/31 Python
python实现指定字符串补全空格、前面填充0的方法
2018/11/16 Python
python读取图片任意范围区域
2019/01/23 Python
python3.x+pyqt5实现主窗口状态栏里(嵌入)显示进度条功能
2019/07/04 Python
Django 过滤器汇总及自定义过滤器使用详解
2019/07/19 Python
python调用Matplotlib绘制分布点图
2019/10/18 Python
Python实现读取并写入Excel文件过程解析
2020/05/27 Python
利用Python优雅的登录校园网
2020/10/21 Python
英国最受欢迎的手表网站:Watch Shop
2016/10/21 全球购物
一套软件开发工程师笔试题
2015/05/18 面试题
护理学中专毕业生求职信
2013/11/11 职场文书
2014优秀党员事迹材料
2014/08/14 职场文书
以幸福为主题的活动方案
2014/08/22 职场文书
医院深入开展党的群众路线教育实践活动实施方案
2014/08/27 职场文书
2015元旦节寄语
2014/12/08 职场文书
自我检讨报告
2015/01/28 职场文书
工资证明格式模板
2015/06/12 职场文书
python 命令行传参方法总结
2021/05/25 Python
彻底解决MySQL使用中文乱码的方法
2022/01/22 MySQL