首页 > Web开发 > 详细

使用JS实现鼠标滚轮事件

时间:2014-10-24 14:29:33      阅读:285      评论:0      收藏:0      [点我收藏+]

网站需要实现鼠标滚轮滚一下,页面向下滑向下一个锚点,由于前面有个一样式必须用jQuery1.3.2,而好多滚轮事件都使用了更高版本的jQuery,于是就从网上找了找

<script type="text/javascript">
        var sel_index = -1
        var sel_max = $(".billboard-hero").length - 1;
        function handle(delta) {
            var s = delta + ": ";
            if (delta < 0) {
                sel_index++;
                s += "您在向下滚……";
                s += sel_index;
                if (sel_index >= sel_max) sel_index = sel_max;
            }
            else {
                sel_index--;
                s += "您在向上滚……";
                s += sel_index;
                if (sel_index <= -1) sel_index = -1;
            }
            location.href = "#" + $(".billboard-hero")[sel_index].id;
        }
        function wheel(event) {
            var delta = 0;
            if (!event) event = window.event;
            if (event.wheelDelta) {
                delta = event.wheelDelta / 120;
                if (window.opera) delta = -delta;
            } else if (event.detail) {
                delta = -event.detail / 3;
            }
            if (delta)
                handle(delta);
        }

        window.addEventListener ? window.addEventListener("DOMMouseScroll", this.wheel, false) : null;

        document.onmousewheel = this.wheel;
    </script>

 

其实和网上的差不多,主要是发现在Chrome和360急速模式下鼠标滚轮滚一下,会触发两次,所以需要

window.addEventListener ? window.addEventListener("DOMMouseScroll", this.wheel, false) : null;

不过本人水平有限,不明其中觉厉...

使用JS实现鼠标滚轮事件

原文:http://www.cnblogs.com/mvv118/p/4048104.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!