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 相关文章推荐
用JS操作FRAME中的IFRAME及其内容的实现代码
Jul 26 Javascript
js GridView 实现自动计算操作代码
Mar 25 Javascript
用JavaScript玩转游戏物理(一)运动学模拟与粒子系统
Jun 19 Javascript
圣诞节Merry Christmas给博客添加浪漫的下雪效果基于jquery实现
Dec 27 Javascript
利用js实现前台动态添加文本框,后台获取文本框内容(示例代码)
Nov 25 Javascript
angularJS结合canvas画图例子
Feb 09 Javascript
Jquery中Event对象属性小结
Feb 27 Javascript
JavaScript实现为指定对象添加多个事件处理程序的方法
Apr 17 Javascript
jquery实现顶部向右伸缩的导航区域代码
Sep 02 Javascript
深入探究AngularJs之$scope对象(作用域)
Jul 20 Javascript
详解开发react应用最好用的脚手架 create-react-app
Apr 24 Javascript
Node.js API详解之 timer模块用法实例分析
May 07 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
用ADODB来让PHP操作ACCESS数据库的方法
2006/12/31 PHP
require(),include(),require_once()和include_once()的异同
2007/01/02 PHP
PHP遍历某个目录下的所有文件和子文件夹的实现代码
2013/06/28 PHP
php密码生成类实例
2014/09/24 PHP
PHP远程调试之XDEBUG
2015/12/29 PHP
Thinkphp 框架基础之入口文件功能、定义与用法分析
2020/04/27 PHP
newxtree.js代码
2007/03/13 Javascript
Jquery下:nth-child(an+b)的使用注意
2011/05/28 Javascript
页面只能打开一次Cooike如何实现
2012/12/04 Javascript
JavaScript与DOM组合动态创建表格实例
2012/12/23 Javascript
jQuery中获取checkbox选中项等操作及注意事项
2013/11/24 Javascript
js省市联动效果完整实例代码
2015/12/09 Javascript
JavaScript中判断数据类型的方法总结
2016/05/24 Javascript
Vue-router路由判断页面未登录跳转到登录页面的实例
2017/10/26 Javascript
vue-cli启动本地服务局域网不能访问的原因分析
2018/01/22 Javascript
selenium+java中用js来完成日期的修改
2019/10/31 Javascript
[52:05]EG vs OG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
如何运行Python程序的方法
2013/04/21 Python
Python实例分享:快速查找出被挂马的文件
2014/06/08 Python
简单谈谈python中的语句和语法
2017/08/10 Python
利用aardio给python编写图形界面
2017/08/21 Python
Python基础学习之常见的内建函数整理
2017/09/06 Python
使用pandas read_table读取csv文件的方法
2018/07/04 Python
Python mutiprocessing多线程池pool操作示例
2019/01/30 Python
python学习——内置函数、数据结构、标准库的技巧(推荐)
2019/04/18 Python
Python3.5运算符操作实例详解
2019/04/25 Python
如何在python中写hive脚本
2019/11/08 Python
基于Python共轭梯度法与最速下降法之间的对比
2020/04/02 Python
快速一键生成Python爬虫请求头
2021/03/04 Python
让IE6、IE7、IE8支持CSS3的脚本
2010/07/20 HTML / CSS
localStorage的过期时间设置的方法详解
2018/11/26 HTML / CSS
物理教学随笔感言
2014/02/22 职场文书
早恋主题班会
2015/08/14 职场文书
2016党员三严三实心得体会
2016/01/15 职场文书
导游词之南京栖霞山
2019/10/18 职场文书
使用ORM新增数据在Mysql中的操作步骤
2021/07/26 MySQL