在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 1479 (Treap 名次树) Graph and Queries

    这题写起来真累.. 名次树就是多了一个附加信息记录以该节点为根的树的总结点的个数,由于BST的性质再根据这个附加信息,我们可以很容易找到这棵树中第k大的值是多少. 所以在这道题中用一棵名次树来维护一个 ...

  2. POJ 3468 A Simple Problem with Integers

    线段树的指针表示法. 代码还有待消化.. 代码里面多次用到了函数递归,感觉这次对递归又有了深一层的理解. #define LOCAL #include <iostream> #includ ...

  3. python练习程序（c100经典例14）

    题目: 将一个正整数分解质因数.例如:输入90,打印出90=2*3*3*5. def foo(n): while 1: for i in range(2,n+1): if n%i==0: print ...

  4. 动态加载 移除js file

    动态加载.移除.替换js/css文件 stylesheetjavascriptcssfunctionnull <script language="javascript"> ...

  5. 剑指offer—第二章算法之二分查找(旋转数组的最小值)

    旋转数组的最小数字 题目:把一个数组最开始的若干元素搬到数组的末尾,我们称之为数组的旋转.输入一个递增排序的数组的一个旋转,输出旋转数组的最小元素.例如:数组{3,4,5,1,2}为{1,2,3,4, ...

  6. Linux/Unix shell 监控Oracle实例(monitor instance)

    使用shell脚本实现对Oracle数据库的监控与管理将大大简化DBA的工作负担,如常见的对实例的监控,监听的监控,告警日志的监控,以及数据库的备份,AWR report的自动邮件等.本文给出Linu ...

  7. ETL工具的评价

    评价项目 评价结果 备注 支持平台 SUN Solaris.HP-UX.IBM AIX.AS/400.OS/390.Sco UNIX.Linux.Windows 支持数据源  DB2.Informix ...

  8. C#操作Excel，对Sheet插入次序的控制 (有待完善)

    C#对Excel文件的操作,插入工作表(Worksheet)的方法是 Workbook.Worksheets.Add().通常情况下,我们在EXCEL的工作薄中,使用菜单操作:插入一个新的工作表,那么 ...

  9. PHP生成静态页面

    生成静态页面的本质就是读取缓存中的信息,然后写到一个生成的html页面中. 一.用ob_start和ob_get_contents生成静态页面 //打开缓存 <?phpob_start();// ...

  10. Oracle V$SESSION详解

    V$SESSION是APPS用户下面对于SYS.V_$SESSION 视图的同义词. 在本视图中,每一个连接到数据库实例中的session都拥有一条记录.包括用户session及后台进程如DBWR,L ...