在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. tarjan总结

    先说一下割点跟割边吧. 割桥就是如果一个连通图里删除这条边之后,这个图会变成两个连通图,那么这条边就称之为割桥. 这是割桥的代码,里面呆着lca求法. 割点和割桥的就是用一个时间戳和回到祖先确定. 用 ...

  2. MySQL "replace into" 的坑

    MySQL 对 SQL 有很多扩展,有些用起来很方便,但有一些被误用之后会有性能问题,还会有一些意料之外的副作用,比如 REPLACE INTO. 比如有这样一张表: CREATE TABLE `au ...

  3. JavaScript——new Date().getMonth()

    new Date().getMonth(); 说明:参照现在的月份,getMonth()返回的是0-11的数字,也就是说0=1月,1=2月……11=12月 当前的月份就是,new Date().get ...

  4. hadoop数据容易出现错误的地方

    最近在搞关于数据分析的项目,做了一点总结. 下图是系统的数据流向.容易出现错误的地方.1.数据进入hadoop仓库有四种来源,这四种是最基本的数据,简称ods,original data source ...

  5. BZOJ 1106 立方体大作战

    BIT. #include<iostream> #include<cstdio> #include<cstring> #include<algorithm&g ...

  6. Java 中无参带返回值方法的使用

    如果方法不包含参数,但有返回值,我们称为无参带返回值的方法. 例如:下面的代码,定义了一个方法名为 calSum ,无参数,但返回值为 int 类型的方法,执行的操作为计算两数之和,并返回结果 在 c ...

  7. crontab 每月最后一天

    0 8 28-31 * * [ `date -d tomorrow +%e` -eq 1 ] && do-something   我觉得能想到这种方法的,都是经验丰富的人.程序员们,想 ...

  8. 把php.exe加入系统环境变量-使用命令行可快速执行PHP命令

    有时候在执行长时间运行的脚本程序的时候,浏览器是架不住的.我们就可以使用CMD命令行或者LINUX命令行执行PHP程序 1.把PHP.EXE加入到环境变量,不用每次都进入到PHP的目录 ①  右击我的 ...

  9. hdu 5254 水题

    纯暴力就能过的,可是题目描述真心不清楚,我看了好久好久才明白题目啥意思. 为了迅速打完,代码比较冗余. /* * Author : ben */ #include <cstdio> #in ...

  10. Linux 下部署单机 hadoop 测试

    最终运行结果展示: 格式化namenode. 开始测试 显示测试进程 浏览器查看效果展示:(虽然还不清楚是什么意思,但是能看到这个效果已经很开心了) 话不多说,进入主题: 1. 安装 VMwareSt ...