Jquery中文网 www.jquerycn.cn
Jquery中文网 >  jQuery  >  jquery 教程  >  正文 微插件推荐系列:jquery.mousewheel

微插件推荐系列:jquery.mousewheel

发布时间:2016-09-16   编辑:www.jquerycn.cn
jquery中文网为您提供微插件推荐系列:jquery.mousewheel等资源,欢迎您收藏本站,我们将为您提供最新的微插件推荐系列:jquery.mousewheel资源

综合概述

一个兼容性强,代码极少的鼠标滚轮插件

兼容性

IE6+、Chrome、Firefox、Safari、Opera

框架依赖

依赖框架:jquery

模块支持

支持AMD、node和浏览器

使用介绍

1.使用方法很简单,仅仅把mousewheel绑定到指定元素上。示例代码如下:

// using on
$('#my_elem').on('mousewheel', function(event) {
    console.log(event.deltaX, event.deltaY, event.deltaFactor);
});

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

2.它提供了两个很有帮助事件mousewheel和unmousewheel来封装了滚轮的事件:使用方法如下:

//绑定mousewheel事件
$('#my_elem').on('mousewheel', function(event) {
        console.log(event.deltaX, event.deltaY, event.deltaFactor);
});

//解除mousewheel事件
$('#my_elem').unmousewheel(fn)

3.阻止事件冒泡,如果只想在某个元素上捕捉事件,而不想冒泡到document上,这样浏览器的滚动条就不会发生滚动了。事件代码如下:

//阻止冒泡
$('#my_elem').on('mousewheel', function(event) {
    console.log(event.deltaX, event.deltaY, event.deltaFactor);
    return false;
});

4.获取滚动的方向,示例代码如下:

    if (delta > 0)
        o += ' up (' + delta + ')';
    else if (delta < 0)
        o += ' down (' + delta + ')';

    if (event.deltaY > 0)
        o += ' north (' + event.deltaY + ')';
    else if (event.deltaY < 0)
        o += ' south (' + event.deltaY + ')';

    if (event.deltaX > 0)
        o += ' east (' + event.deltaX + ')';
    else if (event.deltaX < 0)
        o += ' west (' + event.deltaX + ')';

5.可以通过event.deltaFactor获取滚动的距离,代码如下:

   $('#my_elem').on('mousewheel', function(event) {
       console.log(event.deltaFactor);
       return false;
   });         

下载连接

https://github.com/jquery/jquery-mousewheel

授权信息

授权类型:MIT

授权类型信息:https://github.com/jquery/jquery-mousewheel/blob/master/LICENSE.txt

更改日志

https://github.com/jquery/jquery-mousewheel/blob/master/ChangeLog.md

其他补充

一个很不错的的插件,值得推荐

您可能感兴趣的文章:
jQuery UI 教程之一 ——入门
15个款优秀的 jQuery 图片特效插件推荐
phpcms推荐位按分类调用文章列表的实现代码
去掉dedecms列表推荐时的标题加粗
基于jQuery的表格操作插件
推荐40个非常优秀的jQuery插件和教程【系列三】
poshytip 基于jquery的 插件 主要用于显示微博人的图像和鼠标提示等
40款非常有用的 jQuery 插件推荐(系列一)
JQuery优缺点分析说明
JQuery优缺点分析说明

[关闭]