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 相关文章推荐
document.designMode的功能与使用方法介绍
Nov 22 Javascript
jQuery对象和DOM对象的相互转化实现代码
Mar 02 Javascript
JQuery Tab选项卡效果代码改进版
Apr 01 Javascript
图片动画横条广告带上下滚动可自定义图片、链接等等
Oct 20 Javascript
JS实现控制表格行文本对齐的方法
Mar 30 Javascript
jQuery垂直多级导航菜单代码分享
Aug 18 Javascript
基于PHP和Mysql相结合使用jqGrid读取数据并显示
Dec 02 Javascript
JavaScript编写Chrome扩展实现与浏览器的交互及时间通知
May 16 Javascript
jQuery UI仿淘宝搜索下拉列表功能
Jan 10 Javascript
jQuery简单实现MD5加密的方法
Mar 03 Javascript
用p5.js制作烟花特效的示例代码
Mar 21 Javascript
在vue中import()语法不能传入变量的问题及解决
Apr 01 Vue.js
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
火车头discuz6.1 完美采集的php接口文件
2009/09/13 PHP
Zend Framework中的简单工厂模式 图文
2012/07/10 PHP
php中将字符串转为HTML的实体引用的一个类
2013/02/03 PHP
深入理解curl类,可用于模拟get,post和curl下载
2013/06/08 PHP
PHP的error_reporting错误级别变量对照表
2014/07/08 PHP
PHP实现利用MySQL保存session的方法
2014/08/23 PHP
php使用google地图应用实例
2014/12/31 PHP
使用ThinkPHP生成缩略图及显示
2017/04/27 PHP
php fread函数使用方法总结
2019/05/28 PHP
jQuery UI Autocomplete 体验分享
2012/02/14 Javascript
Jquery绑定事件(bind和live的区别介绍)
2013/08/23 Javascript
网页运行时提示对象不支持abigimage属性或方法
2014/08/10 Javascript
IE下通过a实现location.href 获取referer的值
2014/09/04 Javascript
分享经典的JavaScript开发技巧
2015/11/21 Javascript
浅谈js算法和流程控制
2016/12/29 Javascript
JS区分Object与Aarry的六种方法总结
2017/02/27 Javascript
JS简单获取当前日期时间的方法(如:2017-03-29 11:41:10 星期四)
2017/03/29 Javascript
vue.js 实现点击展开收起动画效果
2018/07/07 Javascript
Vue.js实现的计算器功能完整示例
2018/07/11 Javascript
解决angular2在双向数据绑定时[(ngModel)]无法使用的问题
2018/09/13 Javascript
详解无限滚动插件vue-infinite-scroll源码解析
2019/05/12 Javascript
javascript json对象小技巧之键名作为变量用法分析
2019/11/11 Javascript
Python实现的多线程端口扫描工具分享
2015/01/21 Python
python实现稀疏矩阵示例代码
2017/06/09 Python
Python常见工厂函数用法示例
2018/03/21 Python
详解python异步编程之asyncio(百万并发)
2018/07/07 Python
Python面向对象之静态属性、类方法与静态方法分析
2018/08/24 Python
Flask框架模板渲染操作简单示例
2019/07/31 Python
Django 拆分model和view的实现方法
2019/08/16 Python
一款css实现的鼠标经过按钮的特效
2014/09/11 HTML / CSS
英国奢侈品网站:MatchesFashion
2016/12/16 全球购物
艺校音乐专业自我鉴定范文
2014/03/01 职场文书
让生命充满爱演讲稿
2014/05/10 职场文书
2015年生产车间工作总结
2015/04/22 职场文书
PHP实现rar解压读取扩展包小结
2021/06/03 PHP
MySQL中几种插入和批量语句实例详解
2021/09/14 MySQL