0
点赞
收藏
分享

微信扫一扫

jquery 滚轮插件 jquery.mousewheel.js

_鱼与渔_ 2022-07-27 阅读 148


jquery.mousewheel插件使用

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

Github地址:​​jquery-mousewheel​​

下载jquery.mousewheel的js文件

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





jquery 滚轮插件 jquery.mousewheel.js_jquery


那么先将项目​​git clone​​下来。




jquery 滚轮插件 jquery.mousewheel.js_github_02




jquery 滚轮插件 jquery.mousewheel.js_github_03


好了,那么下面来根据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年前的,那么还是可以用用看看。

编写示例




jquery 滚轮插件 jquery.mousewheel.js_github_04


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

  • 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>




jquery 滚轮插件 jquery.mousewheel.js_html_05


举报

相关推荐

0 条评论