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照片伸缩效果不影响其他元素的布局
May 09 Javascript
JS实现常见的TAB、弹出层效果(TAB标签,斑马线,遮罩层等)
Oct 08 Javascript
理解js对象继承的N种模式
Jan 25 Javascript
js+css实现回到顶部按钮(back to top)
Mar 02 Javascript
js获取所有checkbox的值的简单实例
May 30 Javascript
Vue.js中数据绑定的语法教程
Jun 02 Javascript
在angular 6中使用 less 的实例代码
May 13 Javascript
Vue传参一箩筐(页面、组件)
Apr 04 Javascript
Vue CLI3基础学习之pages构建多页应用
Jun 02 Javascript
小程序如何获取多个formId实现详解
Sep 20 Javascript
vue 使用async写数字动态加载效果案例
Jul 18 Javascript
编写v-for循环的技巧汇总
Dec 01 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
雄兵连三大错觉:凯莎没了,凉冰阵亡了,华烨觉得自己又行了
2020/04/09 国漫
PHP最常用的ini函数分析 针对PHP.ini配置文件
2010/04/22 PHP
兼容各大浏览器带关闭按钮的漂浮多组图片广告代码
2014/06/05 PHP
js onpropertychange输入框 事件获取属性
2009/03/26 Javascript
在Javascript中 声明时用&quot;var&quot;与不用&quot;var&quot;的区别
2013/04/15 Javascript
jquery封装的对话框简单实现
2013/07/21 Javascript
js获取或设置当前窗口url参数的小例子
2013/10/14 Javascript
jquery和css3实现的炫酷时尚的菜单导航
2014/09/01 Javascript
jquery队列函数用法实例
2014/12/16 Javascript
jquery实现在光标位置插入内容的方法
2015/02/05 Javascript
js钢琴按钮波浪式图片排列效果代码分享
2015/08/26 Javascript
EasyUI布局 高度自适应
2016/06/04 Javascript
jquery easyui DataGrid简单示例
2017/01/23 Javascript
用js制作淘宝放大镜效果
2020/10/28 Javascript
基于JavaScript实现新增内容滚动播放效果附完整代码
2017/08/24 Javascript
angular 实时监听input框value值的变化触发函数方法
2018/08/31 Javascript
将Vue组件库更换为按需加载的方法步骤
2020/05/06 Javascript
[03:04]DOTA2超级联赛专访ZSMJ “莫名其妙”的逆袭
2013/05/23 DOTA
Python设置Socket代理及实现远程摄像头控制的例子
2015/11/13 Python
Django自定义过滤器定义与用法示例
2018/03/22 Python
python调用API实现智能回复机器人
2018/04/10 Python
如何利用Anaconda配置简单的Python环境
2019/06/24 Python
Python grpc超时机制代码示例
2020/09/14 Python
Html5跳转到APP指定页面的实现
2020/01/14 HTML / CSS
美国滑雪板和装备购物网站:Skis.com
2018/12/20 全球购物
P D PAOLA法国官网:西班牙著名的珠宝首饰品牌
2020/02/15 全球购物
Unix如何添加新的用户
2014/08/20 面试题
环境工程专业个人求职信
2013/12/05 职场文书
计算机网络工程专业职业生涯规划书
2014/03/10 职场文书
《吃水不忘挖井人》教学反思
2014/04/15 职场文书
大学生应聘求职信
2014/05/26 职场文书
公务员培的训心得体会
2014/09/01 职场文书
2014教师专业技术工作总结
2014/12/03 职场文书
4S店收银员岗位职责
2015/04/07 职场文书
房屋质量投诉书
2015/07/02 职场文书
Python中super().__init__()测试以及理解
2021/12/06 Python