js监控鼠标滚动事件

滚动动画实现

最新推荐文章于 2023-05-23 13:20:53 发布

weixin_34219944

最新推荐文章于 2023-05-23 13:20:53 发布

阅读量114

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/duanzhenzhen/p/10678645.html

本文介绍了一种使用JavaScript和jQuery实现的滚动动画效果，当鼠标滚轮向上滚动时，元素#my_top将显示，而元素#sl_last将隐藏；反之，当鼠标滚轮向下滚动时，元素#my_top将隐藏，而元素#sl_last将显示。该效果适用于多种浏览器，包括IE、Chrome和Firefox。

//滚动动画
            windowAddMouseWheel();
            function windowAddMouseWheel() {
                var scrollFunc = function (e) {
                    e = e || window.event;
                    if (e.wheelDelta) {  //判断浏览器IE，谷歌滑轮事件
                        if (e.wheelDelta > 0) { //当滑轮向上滚动时
                            $("#my_top").slideDown("slow");
                            $("#sl_last").slideUp("slow");
                        }
                        if (e.wheelDelta < 0) { //当滑轮向下滚动时
                            $("#my_top").slideUp("slow");
                            $("#sl_last").slideDown("slow");
                        }
                    } else if (e.detail) {  //Firefox滑轮事件
                        if (e.detail> 0) { //当滑轮向上滚动时
                            $("#my_top").slideDown("slow");
                            $("#sl_last").slideUp("slow");
                        }
                        if (e.detail< 0) { //当滑轮向下滚动时
                            $("#my_top").slideUp("slow");
                            $("#sl_last").slideDown("slow");
                        }
                    }
                };
                //给页面绑定滑轮滚动事件
                if (document.addEventListener) {
                    document.addEventListener('DOMMouseScroll', scrollFunc, false);
                }
                //滚动滑轮触发scrollFunc方法
                window.onmousewheel = document.onmousewheel = scrollFunc;
            }