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 text()要注意啦
Oct 30 Javascript
js 处理URL实用技巧
Nov 23 Javascript
jquery创建一个新的节点对象(自定义结构/内容)的好方法
Jan 21 Javascript
javascript框架设计读书笔记之数组的扩展与修复
Dec 02 Javascript
Jquery异步提交表单代码分享
Mar 26 Javascript
javascript框架设计之浏览器的嗅探和特征侦测
Jun 23 Javascript
javascript封装addLoadEvent实现页面同时加载执行多个函数的方法
Jul 25 Javascript
javascript 玩转Date对象(实例讲解)
Jul 11 Javascript
微信小程序 本地图片按照屏幕尺寸处理
Aug 04 Javascript
jQuery实现图片下载代码
Jul 18 jQuery
Vue切换div显示隐藏,多选,单选代码解析
Jul 14 Javascript
Openlayers实现图形绘制
Sep 28 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完全过滤HTML,JS,CSS等标签
2009/01/16 PHP
PHP中if和or运行效率对比
2014/12/12 PHP
tp5 sum某个字段相加得到总数的例子
2019/10/18 PHP
论坛特效代码收集(落伍转发-不错)
2006/12/02 Javascript
JavaScript获取GridView选择的行内容
2009/04/14 Javascript
JavaScript 基于原型的对象(创建、调用)
2009/10/16 Javascript
一行代码实现纯数据json对象的深度克隆实现思路
2013/01/09 Javascript
jQuery性能优化28条建议你值得借鉴
2013/02/16 Javascript
jQuery多项选项卡的实现思路附样式及代码
2014/06/03 Javascript
jQuery+ajax实现鼠标单击修改内容的方法
2014/06/27 Javascript
JavaScript获取网页表单提交方式的方法
2015/04/02 Javascript
WordPress中利用AJAX技术进行评论提交的实现示例
2016/01/12 Javascript
VueJS全面解析
2016/11/10 Javascript
前端js弹出框组件使用方法
2020/08/24 Javascript
微信小程序 聊天室简单实现
2017/04/19 Javascript
基于zepto.js实现手机相册功能
2017/07/11 Javascript
js实现移动端导航点击自动滑动效果
2017/07/18 Javascript
微信小程序报错:this.setData is not a function的解决办法
2017/09/27 Javascript
Vue实现动态添加或者删除对象和对象数组的操作方法
2018/09/21 Javascript
小程序云开发如何实现图片上传及发表文字
2019/05/17 Javascript
ES6的异步终极解决方案分享
2019/07/11 Javascript
javascript中的数据类型检测方法详解
2019/08/07 Javascript
jquery添加div实现消息聊天框
2020/02/08 jQuery
Javascript ParentNode和ChildNode接口原理解析
2020/03/16 Javascript
[00:32]2018DOTA2亚洲邀请赛EG出场
2018/04/03 DOTA
python和C语言混合编程实例
2014/06/04 Python
利用python实现.dcm格式图像转为.jpg格式
2020/01/13 Python
Django 拼接两个queryset 或是两个不可以相加的对象实例
2020/03/28 Python
英国团购网站:Groupon英国
2017/11/28 全球购物
小区消防演习方案
2014/02/21 职场文书
关于环保的建议书400字
2014/03/12 职场文书
纪检干部先进事迹材料
2014/08/23 职场文书
房屋租赁意向书范本
2015/05/09 职场文书
单位同意报考证明
2015/06/17 职场文书
Python机器学习之基础概述
2021/05/19 Python
WIN10使用IIS部署ftp服务器详细教程
2022/08/05 Servers