在body注册一下滑轮事件

<body onload="win_onload();"></body>

然后JS代码如下:

 function win_onload() {

            ////注册按键事件

            //document.onkeydown = keydown;

            /*注册事件*/

             if(document.addEventListener){

                     document.addEventListener('DOMMouseScroll',scrollFunc,false);

                 }//W3C

             window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome/Safari

        }

        //滑轮事件，上=120，下=-120

        var scrollFunc=function(e){

               var direct=;

                e=e || window.event;

                //上滑动

                if (e.wheelDelta == ) {//IE/Opera/Chrome

                    //执行事件

                    selectProvNode();

                    return false;

                }

                //下滑动

                if (e.wheelDelta == -) {//Firefox

                    //执行事件

                    selectNextNode();

                    return false;

                }

             }

        ////按键事件

        //function keydown() {

        //    //上

        //    if (event.keyCode == 188) {

        //        //执行事件

        //        selectProvNode();

        //        return false;

        //    }

        //    //下

        //    if (event.keyCode == 190) {

        //        //执行事件

        //        selectNextNode();

        //        return false;

        //    }

        //}

但是这样写会有一个缺点就是滑轮一次滑动力度过大会导致事件的多次执行，就算一次只按一格也会执行两次，问题在于

window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome/Safari

这里window和document同时注册了事件然后执行了两次，避免这样的方法，可以加入全局变量判断，执行完一个JS事件后调用回调函数改变标记状态，然后就不会多次执行了，代码如下:

<div id="form1" class="bg">

        第一个

    </div>

    <div id="form2" class="bg2">

        第二个

    </div>

    <div id="form3" class="bg3">

        第三个

    </div>

    <script>

        $(document).ready(function () {

            var height = $(window).height();

            var width = $(window).width();

            var body;

            if (navigator.userAgent.indexOf("Firefox") > 0 || navigator.userAgent.indexOf("MSIE") > 0) {

                body = document.documentElement;

            } else {

                body = document.body;

            }

            var isFinish = true;

            var i = 1;

            var scrollFunc = function (e) {

                if (isFinish) {

                    var scrollTop = body.scrollTop;

                    e = e || window.event;

                    if (e.wheelDelta < 0) {

                        scrollDown(i);

                    } else {

                        scrollUp(i);

                    }

                }

            };

            var scrollDown = function (height) {

                isFinish = false;//判断标记，避免多次执行

                $('#form' + i + '').animate({ height: '0px'}, 'slow', function () {

                    $('#form' + i + '').css('display', 'none');

                    var temp = i + 1 > 3 ? 1 : i + 1;

                    $('#form' + temp + '').animate({ height: '100%'}, 'slow');

                    $('#form' + temp + '').css('display', 'block');

                    console.log(" wheelDelta:" + height);

                    i = temp;

                    isFinish = true;//判断标记，避免多次执行

                });

            };

            var scrollUp = function (height) {

                isFinish = false;//判断标记，避免多次执行

                $('#form' + i + '').animate({ height: '0px' }, 'slow', function () {

                    $('#form' + i + '').css('display', 'none');

                    var temp = i - 1 < 1 ? 3 : i - 1;

                    $('#form' + temp + '').animate({ height: '100%'}, 'slow');

                    $('#form' + temp + '').css('display', 'block');

                    console.log(" wheelDelta:" + height);

                    i = temp;

                    isFinish = true;//判断标记，避免多次执行

                });

            };

            if (navigator.userAgent.indexOf("Firefox") > 0) {

                if (document.addEventListener) {

                    document.addEventListener('DOMMouseScroll', scrollFunc, false);

                }

            } else {

                document.onmousewheel = scrollFunc;

            }

        });

    </script>

JS鼠标滑轮事件的写法和按键的事件的更多相关文章

  1. js鼠标滑轮滚动事件绑定（兼容主流浏览器）

    /** Event handler for mouse wheel event. *鼠标滚动事件 */ var wheel = function(event) { var delta = 0; if ...

  2. js鼠标滑轮侧边广告（仅IE可用）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结

    史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...

  4. JS鼠标事件大全 推荐收藏

    一般事件 事件 浏览器支持 描述 onClick HTML: 2 | 3 | 3.2 | 4 Browser: IE3 | N2 | O3 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击 onDb ...

  5. 问题记录：JavaFx 鼠标滑轮滚动事件监听！

    问题描述: 在listview的item里面添加鼠标拖拽排序功能.代码如下: setOnMouseDragged(event -> { //设定鼠标长按0.3秒后才可拖拽 防止误操作 isCan ...

  6. js鼠标事件大全

    一般事件 事件 浏览器支持 描述 onClick HTML: 2 | 3 | 3.2 | 4 Browser: IE3 | N2 | O3 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击 onDb ...

  7. JS 鼠标事件大全

    一般事件 事件 浏览器支持 描述 onClick HTML: 2 | 3 | 3.2 | 4 Browser: IE3 | N2 | O3 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击 onDb ...

  8. js 鼠标事件的抓取代码

    js 鼠标事件的抓取代码,分享给大家. 1.通过ele.setCapture();设置鼠标事件的抓取. 2,应用可以通过单.双击文字来获取时间. <html> <head> & ...

  9. js鼠标事件

    今天遇到一个非常奇怪而又搞笑的事情:给一个a标签添加一个鼠标移动上时给一个事件,我给其添加的是一个onMouseMove事件,结果在IE6 7 8 9和GOOLE中都很正常,结果在Firox中出现问题 ...

随机推荐

  1. HDU 2897 (博弈 找规律) 邂逅明下

    根据博弈论的两条规则: 一个状态是必胜状态当且仅当有一个后继是必败状态 一个状态是必败状态当且仅当所有后继都是必胜状态 然后很容易发现从1开始,前p个状态是必败状态,后面q个状态是必胜状态,然后循环往 ...

  2. NBUT 1122 Shameimaru's Candid Camera（水）

    题意: 给n*m个格子,初始时每个格子中有个数值为0,部分格子中含有炸弹,每个炸弹爆炸可以将周围的8个非炸弹格子中的数值加1,求全部炸弹炸完后那些非0且非炸弹格子中的数是多少. 思路: 另开一个矩阵, ...

  3. 【英语】Bingo口语笔记(14) - 表示“不愉快”

    bail on 放弃;背弃

  4. aspose.words复制插入同一word文档中的某个页面

    选择word模板 Document doc = new Document(Server.MapPath("~\\templet") + "\\" + name. ...

  5. JS面向对象组件 -- 继承的其他方式(类式继承、原型继承)

    继承的其他形式: •类式继承:利用构造函数(类)继承的方式 •原型继承:借助原型来实现对象继承对象   类 : JS是没有类的概念的 , 把JS中的构造函数看做的类 要做属性和方法继承的时候,要分开继 ...

  6. Dispatcher

    Dispatcher是guava EventBus的事件分发器. Dispatcher是抽象类, 抽象方法: abstract void dispatch(Object event, Iterator ...

  7. BITMAP CONVERSION FROM ROWIDS

    在有些执行计划中,可以会看到 BITMAP CONVERSION FROM ROWIDS这样的东东,也许你会感觉奇怪,我没有使用位图索引怎么出现了bitmap.我通过一个sql和大家分析下原因:sql ...

  8. [转]Linux关机命令详解

    转自:http://www.jb51.net/os/RedHat/1334.html linux下常用的关机命令有:shutdown.halt.poweroff.init:重启命令有:reboot.下 ...

  9. 【quick-cocos2d-x】Lua 面向对象（OOP）编程与元表元方法

    版权声明:本文为博主原创文章,转载请注明出处. 面向对象是一种对现实世界理解和抽象的方法,是计算机编程技术发展到一定阶段后的产物. 早期的计算机编程是基于面向过程的方法,通过设计一个算法就可以解决当时 ...

  10. Oracle 取两个表中数据的交集并集差异集合

    Oracle 取两个表中数据的交集 关键字: Oracle 取两个表中数据的交集 INTERSECT Oracle 作为一个大型的关系数据库,日常应用中往往需要提取两个表的交集数据 例如现有如下表,要 ...