码迷,mamicode.com
首页 > Web开发 > 详细

使用JS实现鼠标滚轮事件

时间:2014-10-24 14:30:51      阅读:154      评论:0      收藏:0      [点我收藏+]

标签:style   blog   color   io   ar   使用   java   sp   div   

网站需要实现鼠标滚轮滚一下,页面向下滑向下一个锚点,由于前面有个一样式必须用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实现鼠标滚轮事件

标签:style   blog   color   io   ar   使用   java   sp   div   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!