返回顶部

收藏

jQuery鼠标滚轮事件插件

更多

有时候会用到鼠标滚轮事件,事实上用滚动鼠标滚轮操作某些类似需要拉动滚动条才能查看的内容时确实很便利。这款jQuery Mouse Wheel Plugin插件(地址:http://brandonaaron.net)能够绑定任何元素,比如某个层。

/**
 * 
 * credits for this plugin go to brandonaaron.net
 *  
 * unfortunately his site is down
 * 
 * @param {Object} up
 * @param {Object} down
 * @param {Object} preventDefault
 */
jQuery.fn.extend({
    mousewheel: function(up, down, preventDefault) {
        return this.hover(
            function() {
                jQuery.event.mousewheel.giveFocus(this, up, down, preventDefault);
            },
            function() {
                jQuery.event.mousewheel.removeFocus(this);
            }
        );
    },
    mousewheeldown: function(fn, preventDefault) {
        return this.mousewheel(function(){}, fn, preventDefault);
    },
    mousewheelup: function(fn, preventDefault) {
        return this.mousewheel(fn, function(){}, preventDefault);
    },
    unmousewheel: function() {
        return this.each(function() {
            jQuery(this).unmouseover().unmouseout();
            jQuery.event.mousewheel.removeFocus(this);
        });
    },
    unmousewheeldown: jQuery.fn.unmousewheel,
    unmousewheelup: jQuery.fn.unmousewheel
});

jQuery.event.mousewheel = {
    giveFocus: function(el, up, down, preventDefault) {
        if (el._handleMousewheel) jQuery(el).unmousewheel();

        if (preventDefault == window.undefined && down && down.constructor != Function) {
            preventDefault = down;
            down = null;
        }

        el._handleMousewheel = function(event) {
            if (!event) event = window.event;
            if (preventDefault)
                if (event.preventDefault) event.preventDefault();
                else event.returnValue = false;
            var delta = 0;
            if (event.wheelDelta) {
                delta = event.wheelDelta/120;
                if (window.opera) delta = -delta;
            } else if (event.detail) {
                delta = -event.detail/3;
            }
            if (up && (delta > 0 || !down))
                up.apply(el, [event, delta]);
            else if (down && delta < 0)
                down.apply(el, [event, delta]);
        };

        if (window.addEventListener)
            window.addEventListener('DOMMouseScroll', el._handleMousewheel, false);
        window.onmousewheel = document.onmousewheel = el._handleMousewheel;
    },

    removeFocus: function(el) {
        if (!el._handleMousewheel) return;

        if (window.removeEventListener)
            window.removeEventListener('DOMMouseScroll', el._handleMousewheel, false);
        window.onmousewheel = document.onmousewheel = null;
        el._handleMousewheel = null;
    }
};

使用方法也相当简单:

有2种绑定该事件的方式,1、利用插件自身的mousewheel()方法,2、jquery的bind()方法

例如:

$('div.mousewheel_example').mousewheel(fn);
$('div.mousewheel_example').bind('mousewheel', fn);

// using bind
$('#my_elem').bind('mousewheel', function(event, delta) {
    console.log(delta);
});

// using the event helper
$('#my_elem').mousewheel(function(event, delta) {
    console.log(delta);
});

要注意的是回调函数的第二个参数delta,它响应滚轮的方向,当为负数时表示向下滚动,为正则表示向上滚动。 更多内容请看:http://brandonaaron.net

标签:javascript,jquery,鼠标滚轮事件

收藏

0人收藏

支持

0

反对

0

发表评论