鼠标滚轮事件监听及jquery.mousewheel.js示例及插件下载
更新:2022-04-24 11:57:24
人气:75
来源:本站原创
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
随手记
- ● mysql的慢查询日志记录什么
- ● js获取上传文件类型以及大小的方法
- ● windows系统如何查询openssl.cnf文件位置及更换路径
- ● SSL证书工具之CSR的作用是什么?
- ● [ssl:warn]SessionCacheisnotconfigured[hint:SSLSessionCache]原因
- ● servercertificatedoesNOTincludeanIDwhichmatchestheservername
- ● jquery怎么删除元素本身
- ● LODOP不同电脑打印效果不同排查
- ● LODOP不同打印机出现偏移问题
- ● phpmyadmin绿色中文版百度云下载
PHP经验分享