欢迎您来到,码代码-李雷博客        登录  |  注册

鼠标滚轮事件监听及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);
});

e348fec1f0623115855d99cc739c9508.png

事件属性说明:

事件对象中可以获取如下三个属性值:

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

推荐的文章
# 发表我的评论
  /     /  
# 最近评论
暂时还没有评论,要不要说点什么?
网站地图
会员服务
关于我们
QQ:858353007
 
广告服务
加我微信
移动端访问
 
 
Copyright © 2014- 2022 www.mdaima.com All Rights Reserved.
李雷博客,专注PHP经验、PHP教程及PHP源代码开源下载分享的PHP博客!   ICP备案号:京ICP备10202169号