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

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

人气：1717

来源：本站原创

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博客

推荐的文章

PHP不用写结尾符号吗？

apache常用的配置指令：ServerTokens

利用AJAX代替frame框架通过异步加载页面到指定div元素上

关于LODOP打印组件从http升级到https后的问题解决（即扩展版C-Lodop如何使用）

# 发表我的评论

/ /

# 最近评论

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

Ads by Google

随手记

PHP经验分享

联系博主

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

QQ：858353007 微信号：lileihot123

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

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


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