鼠标滚轮事件监听及jquery.mousewheel.js示例及插件下载

更新：2022-04-24 11:57:24

人气：1848

来源：本站原创

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及示例

mousewheel.min.js.zip

转载请注明：鼠标滚轮事件监听及jquery.mousewheel.js示例及插件下载 | 李雷博客 - PHP博客

推荐的文章

如何本地制作CRT证书及Apache开启SSL实现局域网的https访问

吐槽流氓软件360安全卫视、360浏览器推送的广告无法关闭

ckplayer跨域播放错误通过apache配置搞定的方法

MySQL崩溃-如何修复损坏的innodb：innodb_force_recovery

# 发表我的评论

/ /

# 最近评论

暂时还没有评论，要不要说点什么？

Ads by Google

随手记

PHP经验分享

联系博主

Hello，本博客系统采用PHP和MySql开发，程序开发完全是因为个人爱好，是自己纯手写PHP源代码，未采用任何PHP框架！

QQ：858353007 微信号：lileihot123

标签：PHP技术博客 PHP经验分享

网站地图 XML地图随手记本站声明博客移动版	会员服务 PHP经验分享帮助中心	关于我们联系我们获取积分 QQ：858353007	广告服务广告优势付款方式 mdaima@126.com	加我微信	移动端访问


Copyright © 2014- 2026 www.mdaima.com All Rights Reserved. 李雷博客，专注PHP经验、PHP教程及PHP源代码开源下载分享的PHP博客！ ICP备案号：京ICP备10202169号-4