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 相关文章推荐
css把超出的部分显示为省略号的方法兼容火狐
Jul 23 Javascript
基于JQuery实现CheckBox全选全不选
Jun 27 Javascript
Textbox控件注册回车事件及触发按钮提交事件具体实现
Mar 04 Javascript
JQueryEasyUI Layout布局框架的使用
Apr 08 Javascript
jQuery获取样式中颜色值的方法
Jan 29 Javascript
纯JavaScript实现的兼容各浏览器的添加和移除事件封装
Mar 28 Javascript
jquery合并表格中相同文本的相邻单元格
Jul 17 Javascript
js实时获取并显示当前时间的方法
Jul 31 Javascript
JS中对象与字符串的互相转换详解
May 20 Javascript
bootstrap fileinput完整实例分享
Nov 08 Javascript
Node.js开发教程之基于OnceIO框架实现文件上传和验证功能
Nov 30 Javascript
基于Vue的文字跑马灯组件(npm 组件包)
May 24 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+js实现图片的上传、裁剪、预览、提交示例
2013/08/27 PHP
php使用base64加密解密图片示例分享
2014/01/20 PHP
smarty模板中使用get、post、request、cookies、session变量的方法
2014/04/24 PHP
Yii框架结合sphinx,Ajax实现搜索分页功能示例
2016/10/18 PHP
php封装的图片(缩略图)处理类完整实例
2016/10/19 PHP
php+Memcached实现简单留言板功能示例
2017/02/15 PHP
Thinkphp5 微信公众号token验证不成功的原因及解决方法
2017/11/12 PHP
随机显示经典句子或诗歌的javascript脚本
2007/08/04 Javascript
5款Javascript颜色选择器
2009/10/25 Javascript
js获取系统的根路径实现介绍
2013/09/08 Javascript
基于jQuery和CSS3实现APPLE TV海报视差效果
2017/06/16 jQuery
微信小程序template模板与component组件的区别和使用详解
2019/05/22 Javascript
VUE+elementui面包屑实现动态路由详解
2019/11/04 Javascript
JavaScript数组去重实现方法小结
2020/01/17 Javascript
Vue结合路由配置递归实现菜单栏功能
2020/06/16 Javascript
Django在Win7下的安装及创建项目hello word简明教程
2014/07/14 Python
Python利用pyHook实现监听用户鼠标与键盘事件
2014/08/21 Python
Python的迭代器和生成器
2015/07/29 Python
HTML中使用python屏蔽一些基本功能的方法
2017/07/07 Python
Python创建数字列表的示例
2019/11/28 Python
python matplotlib中的subplot函数使用详解
2020/01/19 Python
django queryset相加和筛选教程
2020/05/18 Python
Python切片列表字符串如何实现切换
2020/08/06 Python
python 实现简易的记事本
2020/11/30 Python
解决pycharm修改代码后第一次运行不生效的问题
2021/02/06 Python
结合 CSS3 transition transform 实现简单的跑马灯效果的示例
2018/02/07 HTML / CSS
英国领先的酒类网上商城:TheDrinkShop
2017/03/16 全球购物
Martinelli官方商店:西班牙皮鞋和高跟鞋品牌
2019/07/30 全球购物
介绍一下Linux中的链接
2016/06/05 面试题
应届生自我鉴定
2013/12/11 职场文书
安全大检查实施方案
2014/02/22 职场文书
七夕活动策划方案
2014/08/16 职场文书
一年级班主任工作总结2014
2014/11/08 职场文书
汤姆索亚历险记读书笔记
2015/06/29 职场文书
mysql 8.0.24版本安装配置方法图文教程
2021/05/12 MySQL
如何在python中实现ECDSA你知道吗
2021/11/23 Python