jquery中没有鼠标滚轮事件,那么可以使用jquery的滚轮事件插件jquery.mousewheel.js。
访问Github之后,主要jquery需要用到这两个js文件。
那么先将项目git clone
下来。
好了,那么下面来根据Github上的说明,来演练操作一下这个插件。
A jQuery plugin that adds cross-browser mouse wheel support with delta normalization.
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年前的,那么还是可以用用看看。
在滚轮滚动的时候,会打印三个参数的值。
<!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>