在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. PHP常见框架

    PHP是一种在国内外都比较流行的开源服务器端脚本开发语言.能够适应大中小型项目的开发需求.我们将在这篇文章中向大家介绍几款主流PHP框架及其相关优缺点评比,作为一个参考分享给朋友们. 主要参考的PHP ...

  2. poj 1465 Multiple（bfs+余数判重）

    题意:给出m个数字,要求组合成能够被n整除的最小十进制数. 分析:用到了余数判重,在这里我详细的解释了.其它就没有什么了. #include<cstdio> #include<cma ...

  3. BZOJ 1106 立方体大作战

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

  4. 迁移应用数据库到MySQL Database on Azure

    by Rong Yu 有用户问怎么把他们应用的数据库迁移到MySQL Database on Azure上,有哪些方式,有没有需要注意的地方.今天我们来概括介绍一下迁移应用数据库到MySQL Data ...

  5. SOAP+WSDL

    一 SOAPSOAP最开始是用作RPC机制的,后来XML的出现使其应用非常广泛.它与HTTP一样是一种应用级协议,使用他可以在不同的应用程序之间进行数据交换.SOAP可以基于HTTP,也可以基于HTT ...

  6. Task和BackTask

    一.总结性知识点:     1.Android应用运行时会创建任务Task,用于存放主窗口     2.每一个任务包含一个堆栈数据结构,用于保存当前应用已创建的窗口对象,这个堆栈即回退栈BackSta ...

  7. 【模版消息】C#推送微信模版消息（Senparc.Weixin.MP.dll）

    定义的模版内容: {{first.DATA}} 商品名称:{{product.DATA}} 商品价格:{{price.DATA}} 购买时间:{{time.DATA}} {{remark.DATA}} ...

  8. Spring3.0.6定时任务

    项目使用的Spring版本比较旧是3.0.6版本,由于需要进行定时任务,就决定使用Spring自带的scheduled task. 在网上找了很多文章,也查看了Spring3.0.6的官方文档,按照网 ...

  9. delphi中通过CreateOleObject操控Word

    http://blog.csdn.net/csm2432/article/details/7692443

  10. 【LeetCode 234】Palindrome Linked List

    Given a singly linked list, determine if it is a palindrome. 思路: 用快慢指针找到链表中点,反转后半部分链表,然后与前半部分进行匹配,随后 ...