鼠标滚轮事件监听及jquery.mousewheel.js示例及插件下载
更新：2022-04-24 11:57:24
人气：1488
来源：本站原创
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);
});
//动态设置值
$('.slider').jRange('setValue', '10,20');
$('.slider').jRange('setValue', '10');
$('.slider').jRange('updateRange', '0,100');
$('.slider').jRange('updateRange', '0,100', '25,50');
$('.slider').jRange('updateRange', '0,100', 25);
事件属性说明：
事件对象中可以获取如下三个属性值：
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经验分享
- ● MySQLSUM在没有符合查询条件时返回结果为空的处理办法
- ● 如何开启PHP8的JIT提升运行速度
- ● 钉钉API接口-用PHP+Curl实现获取用户信息
- ● 钉钉API接口-用PHP+Curl实现获取应用Access_Token
- ● 在PHP中使用CURL，“撩”服务器只需几行——phpcurl详细解析和常见大坑
- ● MySQLInnodb并发涉及参数说明
- ● mysql参数调优之innodb_thread_concurrency、innodb_concurrency_tickets合理的使用cpu性能
- ● PHP用fsockopen检测指定IP端口是否开启可用
- ● PHP用socket检测服务器IP端口是否开放？代码示例
- ● GatewayWorker报错：Waring:Events::onMessageisnotcallable
