jquery 滚轮插件 jquery.mousewheel.js

最新推荐文章于 2024-10-10 07:41:31 发布

海洋的渔夫

最新推荐文章于 2024-10-10 07:41:31 发布

阅读量1.5k

点赞数

分类专栏： JQuery系列

本文链接：https://blog.csdn.net/u012887259/article/details/102425748

版权

JQuery系列专栏收录该内容

39 篇文章

订阅专栏

jquery.mousewheel插件使用

jquery中没有鼠标滚轮事件，那么可以使用jquery的滚轮事件插件jquery.mousewheel.js。

Github地址:jquery-mousewheel

下载jquery.mousewheel的js文件

访问Github之后，主要jquery需要用到这两个js文件。

那么先将项目git clone下来。

好了，那么下面来根据Github上的说明，来演练操作一下这个插件。

jQuery Mouse Wheel Plugin

A jQuery plugin that adds cross-browser mouse wheel support with delta normalization.

Note: There is a bug in Safari 9 that prevents the plugin from working properly. See this comment for some possible workarounds, and watch this Webkit ticket to find out if and when Apple will fix it.

In order to use the plugin, simply bind the mousewheel event to an element.

It also provides two helper methods called mousewheel and unmousewheel that act just like other event helper methods in jQuery.

The event object is updated with the normalized deltaX and deltaY properties. In addition there is a new property on the event object called deltaFactor. Multiply the deltaFactor by deltaX or deltaY to get the scroll distance that the browser has reported.

Here is an example of using both the bind and helper method syntax:

// 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);
});

The old behavior of adding three arguments (delta, deltaX, and deltaY) to the event handler is now deprecated and will be removed in later releases.

虽然说这种用法在后面的版本会被抛弃，但是现在最新的版本是在4年前的，那么还是可以用用看看。

编写示例

在滚轮滚动的时候，会打印三个参数的值。

deltaX：值为负的（-1），则表示滚轮向左滚动。值为正的（1），则表示滚轮向右滚动。
deltaY：值为负的（-1），则表示滚轮向下滚动。值为正的（1），则表示滚轮向上滚动。
deltaFactor：增量因子。通过 deltaFactor * deltaX 或者 deltaFactor * deltaY 可以得到浏览器实际的滚动距离。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="jquery/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="jquery-mousewheel/jquery.mousewheel.min.js"></script>
    <script type="text/javascript">
        $(window).mousewheel(function(event){
             // console.log(event.deltaX, event.deltaY, event.deltaFactor);
             console.log(event.deltaX, event.deltaY, event.deltaFactor);
        })
    </script>
    <style type="text/css">
        *{
            margin: 50px auto 0;
        }

        #box1{
            width: 200px;
            height: 200px;
            background: gold;
        }
    </style>
</head>
<body>
    <div id="box1"></div>
    <!-- (p{这是一个p元素}>br*10)*10 -->
    <p>这是一个p元素
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
    </p>
    <p>这是一个p元素
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
    </p>
    <p>这是一个p元素
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
    </p>
    <p>这是一个p元素
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
    </p>
    <p>这是一个p元素
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
    </p>
    <p>这是一个p元素
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
    </p>
    <p>这是一个p元素
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
    </p>
    <p>这是一个p元素
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
    </p>
    <p>这是一个p元素
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
    </p>
    <p>这是一个p元素
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
    </p>
</body>
</html>