返回顶部

收藏

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

相关聚客文章
  1. ajaxj 发表 2014-07-10 13:47:58 前端不容错过的jQuery图片滑块插件
  2. 王迎然 发表 2013-08-26 12:54:23 一个基于jQuery的轻量级rDialog.js
  3. wangshuai 发表 2014-02-20 06:47:48 jquery选择指定的父元素
  4. 王思捷 发表 2014-11-22 13:52:26 让jQuery在移动设备上支持滑动事件(swipe)
  5. 知更鸟 发表 2015-01-24 15:06:32 12款经典图片轮播jquery插件
  6. chirs <> 发表 2009-01-05 13:18:12 基于jQuery的表单验证插件
  7. sean 发表 2012-07-18 06:57:41 Jquery实现图片的预加载与延时加载
  8. 小鱼 发表 2014-10-16 08:36:37 在macos下卸载nodejs
  9. 王子墨 发表 2011-05-14 18:03:24 jQuery 1.6 (JavaScript Library) 正式版发布
  10. hqlulu <hqlulu@163.c 发表 2013-04-09 15:02:04 转:jquery的表单提交
  11. maisui99 发表 2012-07-31 06:25:47 Zepto.js之旅(一)
  12. 新一 发表 2013-06-28 02:05:13 highstock图表插件设置时区的配置

发表评论