js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)

代码如下:

/** 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; 
            } 
        }

(0)

相关推荐

  • 浅谈JavaScript之事件绑定

    其实没有什么新的知识点,只是为了方便其他有需要的朋友们翻阅,对自己而言也算是一个积累,所以只能算是闲谈 JavaScript,老鸟们可以尽情飘过.在进入正题之前,先提个问题热热身吧.现在有如下 HTML 结构: 复制代码 代码如下: <div id="wrap"> <input type="button" value="按钮一" /> <input type="button" value=&quo

  • javascript 处理事件绑定的一些兼容写法

    绑定事件 复制代码 代码如下: var addEvent = function( obj, type, fn ) { if (obj.addEventListener) obj.addEventListener( type, fn, false ); else if (obj.attachEvent) { obj["e"+type+fn] = fn; obj.attachEvent( "on"+type, function() { obj["e"

  • div+css+js模拟tab切换效果 事件绑定 IE,firefox兼容

    div+css+js模拟tab, 我这个版本,理论上可以添加无限个tab,而且,你只要管内容的添加行了,不需要改JS 当然,你得会DIV才行. div+css+js模拟tab 框1111 框2222 框3333 框4444 这里是内容撒.111.. 这里是内容撒.111.. 这里是内容撒.111.. 这里是内容撒222.. 这里是内容撒.222.. 这里是内容撒.222.. 这里是内容撒.333.. 这里是内容撒.333.. 这里是内容撒.333.. 这里是内容撒.444.. 这里是内容撒.44

  • JS的事件绑定深入认识

    一.传统事件模型 传统事件模型中存在局限性. 内联模型以HTML标签属性的形式使用,与HTML混写,这种方式无疑造成了修改以及扩展的问题,已经很少使用了. 脚本模型是将事件处理函数写到js文件中,从页面获取元素进行对应事件函数的绑定以触发执行.但也存在不足之处: 1.一个事件绑定多个事件监听函数,后者将覆盖前者. 2.需要限制重复绑定的情况 3.标准化event对象 二.现代事件绑定 DOM2级事件定义了两个方法用于添加.删除事件:addEventListener().removeEventLi

  • Javascript函数加壳多用于事件绑定

    function addShell(func,name,obj) { func=Function(func); if(!obj) obj=window; var old = obj[name]; if (typeof obj[name] != 'function') { obj[name] = func; } else { obj[name] = function() { var ja=[]; var t = obj[name].arguments; for(var x=0;x [Ctrl+A

  • JS 事件绑定函数代码

    主要解决了 浏览器兼容,现在可以兼容IE6 7 8 FF 谷歌(废话) IE浏览器里,this指向问题. 直接上代码吧! 复制代码 代码如下: var bind=function(object,type,fn){ if(object.attachEvent){//IE浏览器 object.attachEvent("on"+type,(function(){ return function(event){ window.event.cancelBubble=true;//停止时间冒泡 o

  • js事件绑定快捷键以ctrl+k为例

    js代码 <html> <head> <script type="text/javascript"> window.onload=function(){ HotKeyHandler.Init(); } var HotKeyHandler={ currentMainKey:null, currentValueKey:null, Init:function(){ HotKeyHandler.Register(0,"K",functio

  • Javascript 事件流和事件绑定

    事件流 浏览器中的事件流意味着页面上可有不仅一个,甚至多个元素响应同一个事件.而这一个或多个元素响应事件发生的先后顺序在各个浏览器(主要针对IE和Netscape)上是不同的. 冒泡型事件(Dubbed Bubbling) IE上的解决方案就是冒泡型事件(Dubbed Bubbling).冒泡型事件的基本思想是,事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. 示例(1):点击我触发冒泡型事件流 示例(1)的XHTML代码结构:<span id="cnt0

  • javascript事件的绑定基础实例讲解(34)

    本文实例为大家分享了js事件绑定的具体代码,供大家参考,具体内容如下 <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> window.onload = function(){ var btn01 = document.getElementById("btn01&quo

  • Node.js中使用事件发射器模式实现事件绑定详解

    在Node里,很多对象都会发射事件.比如,一个TCP服务器,每当有客户端请求连接就会发射"connect"事件,又比如,每当读取一整块数据,文件系统就会发射一个"data"事件.这些对象在Node里被称为事件发射器(event emitter).事件发射器允许程序员订阅他们感兴趣的事件,并将回调函数绑定到相关的事件上,这样每当事件发射器发射事件时回调函数就会被调用.发布/订阅模式非常类似传统的GUI模式,比如按钮被点击时程序就会收到相应的通知.使用这种模式,服务端程

随机推荐