教程集 www.jiaochengji.com
教程集 >  jQuery  >  jquery 教程  >  正文 微插件推荐系列:jquery.mousewheel

微插件推荐系列:jquery.mousewheel

发布时间:2016-09-16   编辑:jiaochengji.com
教程集为您提供微插件推荐系列: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

其他补充

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

您可能感兴趣的文章:

[关闭]
~ ~