鼠标滚轮事件监听及jquery.mousewheel.js示例及插件下载
更新：2022-04-24 11:57:24
人气：777
来源：本站原创
A+
之前为年会做了一套现场导播的控制系统，其中包含影音设备的播放监控功能，但对音量的控制之前是用滑块来操作，体验感不太好，空闲决定利用鼠标的滚轮来操作。
先学习一下用法：
// 方式1：using on
$('#mdaima').on('mousewheel', function(event) {
console.log(event.deltaX, event.deltaY, event.deltaFactor);
});
// 方式2：using the event helper
$('#mdaima').mousewheel(function(event) {
console.log(event.deltaX, event.deltaY, event.deltaFactor);
});
事件属性说明：
事件对象中可以获取如下三个属性值：
deltaX：值为负的（-1），则表示滚轮向左滚动。值为正的（1），则表示滚轮向右滚动。 deltaY：值为负的（-1），则表示滚轮向下滚动。值为正的（1），则表示滚轮向上滚动。 deltaFactor：增量因子。通过 deltaFactor * deltaX 或者 deltaFactor * deltaY 可以得到浏览器实际的滚动距离。
下面就是示例：
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type=text/javascript src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.mousewheel.min.js"></script>
</head>
<body>
<div id="mdaima">----</div>
<script>
var yinliang=50;//初始化音量值
$(window).mousewheel(function(event) {
console.log(event.deltaX, event.deltaY, event.deltaFactor);
var delta_num=event.deltaY
//主要判断event.deltaY，正：上，负：下
if (delta_num>0){
yinliang++;
if (yinliang>100) {
yinliang=100
}
$("#mdaima").html("音量-加（上）：" + yinliang)
}else{
yinliang--;
if (yinliang<0) {
yinliang=0
}
$("#mdaima").html("音量-减（下）：" + yinliang)
}
});
</script>
</body>
</html>李雷博客提供了jquery.mousewheel.js插件下载，包含jquery.min.js及示例
推荐的文章
Ads by Google
随手记
PHP经验分享
