在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. UVa 1626 (输出方案) Brackets sequence

    正规括号序列定义为: 空序列是正规括号序列 如果S是正规括号序列,那么[S]和(S)也是正规括号序列 如果A和B都是正规括号序列,则AB也是正规括号序列 输入一个括号序列,添加尽量少的括号使之成为正规 ...

  2. Tarjan算法应用 （割点/桥/缩点/强连通分量/双连通分量/LCA(最近公共祖先)问题）（转载）

    Tarjan算法应用 (割点/桥/缩点/强连通分量/双连通分量/LCA(最近公共祖先)问题)(转载) 转载自:http://hi.baidu.com/lydrainbowcat/blog/item/2 ...

  3. web项目路径问题

    路径    相对路径        URL中第一个字符不为“/”        request.getRequestDispatcher("b");        相对于该代码所在 ...

  4. QCon 2015 阅读笔记 - 其他精选主题

    QCon 2015阅读笔记 QCon 2015 阅读笔记 - 移动开发最佳实践 QCon 2015 阅读笔记 - 团队建设 QCon 2015 阅读笔记 - 其他精选主题 以前分享过两个主题:移动开发 ...

  5. android 中解析XML的方法(转)

    在XML解析和使用原始XML资源中都涉及过对XML的解析,之前使用的是 DOM4J和 XmlResourceParser 来解析的.本文中将使用XmlPullParser来解析,分别解析不同复杂度的t ...

  6. 多核模糊C均值聚类

    摘要: 针对于单一核在处理多数据源和异构数据源方面的不足,多核方法应运而生.本文是将多核方法应用于FCM算法,并对算法做以详细介绍,进而采用MATLAB实现. 在这之前,我们已成功将核方法应用于FCM ...

  7. php的session.serialize_handler

    php里面的session.serialize_handler用来设置php的session的序列化方式,默认值为php,及使用php的序列化与反序列化. 还有一个值为session.serializ ...

  8. 【英语】Bingo口语笔记(23) - 万圣节系列

    jack-o-lantern 杰克灯(南瓜灯) spooky 幽灵般的

  9. JQuery开发之Galleriffic图片插件介绍

    Galleriffic是一个用于创建快速展示相册中照片的jQuery插件.从图一中可以看成,图片既可以以幻灯片的方式查看,也可以手动点击缩略图查看.Galleriffic还支持分页,从而使得它能够展示 ...

  10. js实现密码加密

    http://www.cnblogs.com/mofish/archive/2012/02/25/2367858.html 1.base64加密 在页面中引入base64.js文件,调用方法为: &l ...