js捕获鼠标滚动事件

最新推荐文章于 2024-09-29 13:35:28 发布
最新推荐文章于 2024-09-29 13:35:28 发布
阅读量1.4k 收藏
点赞数
分类专栏： jquery javascript 文章标签： js 鼠标 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mazhili1991/article/details/46429927
版权

js如何判断滚轮的上下滚动，我们应该都见到过这种效果，用鼠标滚轮实现某个表单内的数字向上滚动就增加，向下滚动就减少的操作，这种效果是通过js对鼠标滚轮的事件监听来实现的,因为不同的浏览器有不同的滚轮事件。主要是有两种，onmousewheel（firefox不支持）和DOMMouseScroll（只有firefox支持），关于这两个事件这里不做详述，想要了解的朋友请移步：鼠标滚轮(mousewheel)和DOMMouseScroll事件，所以在这个过程中需要添加事件监听，代码如下：兼容firefox采用addEventListener监听。

下面是我写的一个简单的类似跑马灯的效果，



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>test</title>
  <meta http-equiv="Cotnent-Type" content="text/html; charset=utf-8" />
  <meta charset="utf-8" />
 </head>
 <script type="text/javascript" src="jquery-2.1.3.min.js"></script>
<style>
.outerLayer{
height: 260px;
width: 260px;
border: 2px solid black;
top: 10%;
left: 40%;
position: absolute;
}
.topDiv{
height: 52px;
width: 208px;
position: absolute;
}
.topDiv_in{
height: 50px;
width:50px;
border: 1px solid black;
float: left;
text-align: center;
line-height: 50px;
}
.leftDiv{
width: 50px;
height: 207px;
position: absolute;
top: 52px;
}
.leftDiv_in{
width: 50px;
height: 50px;
border: 1px solid black;
text-align: center;
line-height: 50px;
}
.bottomDiv{
width: 210px;
height: 52px;
position: absolute;
left: 52px;
top: 207px;
}
.bottomDiv_in{
width: 50px;
height: 51px;
border: 1px solid black;
float: left;
text-align: center;
line-height: 50px;
}
.rightDiv{
width: 53px;
height: 207px;
position: absolute;
left: 207px;
}
.rightDiv_in{
width: 50px;
height: 50px;
border: 1px solid black;
float: right;
text-align: center;
line-height: 50px;
}
.middleDiv{
width: 154px;
height: 154px;
position: absolute;
border: 1px solid black;
left: 52px;
top: 52px;
text-align: center;
line-height: 154px;
font-weight: bold;
font-size: 36px;
}
</style>
 <body>
  <div class="outerLayer">


<div class="topDiv">
<div class="topDiv_in" id="div1">1</div>
<div class="topDiv_in" id="div16">16</div>
<div class="topDiv_in" id="div15">15</div>
<div class="topDiv_in" id="div14">14</div>
</div>


<div class="leftDiv">
<div class="leftDiv_in" id="div2">2</div>
<div class="leftDiv_in" id="div3">3</div>
<div class="leftDiv_in" id="div4">4</div>
<div class="leftDiv_in" id="div5">5</div>
</div>


<div class="bottomDiv">
<div class="bottomDiv_in" id="div6">6</div>
<div class="bottomDiv_in" id="div7">7</div>
<div class="bottomDiv_in" id="div8">8</div>
<div class="bottomDiv_in" id="div9">9</div>
</div>


<div class="rightDiv">
<div class="rightDiv_in" id="div13">13</div>
<div class="rightDiv_in" id="div12">12</div>
<div class="rightDiv_in" id="div11">11</div>
<div class="rightDiv_in" id="div10">10</div>
</div>


<div class="middleDiv" id="middleContext"></div>

  </div>




<script>


$(document).ready(function(){
var index = 1;


var scrollFunc = function scrollFunc(e){
e = e || window.event;


if(e.wheelDelta){//IE/Opera/Chrome 
if(e.wheelDelta<0){//向下滚动
$("div[id^=div]").removeAttr("style data-id");


if(index<16){
index++;
}else{
index = 1;
}

if(index==3){
$("#div3").attr("style","background-color: blue;").attr("data-id","1");
$("#div2").attr("style","background-color: yellow;").attr("data-id","2");
$("#div1").attr("style","background-color: red;").attr("data-id","3");
$("#div16").attr("style","background-color: green;").attr("data-id","4");
}else if(index==2){
$("#div2").attr("style","background-color: blue;").attr("data-id","1");
$("#div1").attr("style","background-color: yellow;").attr("data-id","2");
$("#div16").attr("style","background-color: red;").attr("data-id","3");
$("#div15").attr("style","background-color: green;").attr("data-id","4");
}else if(index==1){
$("#div1").attr("style","background-color: blue;").attr("data-id","1");
$("#div16").attr("style","background-color: yellow;").attr("data-id","2");
$("#div15").attr("style","background-color: red;").attr("data-id","3");
$("#div14").attr("style","background-color: green;").attr("data-id","4");
}else if(index>=4){
$("#div"+index).attr("style","background-color: blue;").attr("data-id","1");
$("#div"+(index-1)).attr("style","background-color: yellow;").attr("data-id","2");
$("#div"+(index-2)).attr("style","background-color: red;").attr("data-id","3");
$("#div"+(index-3)).attr("style","background-color: green;").attr("data-id","4");
}

var temp = $("#div3").attr("data-id");
if(temp==1){
$("#middleContext").html("蓝色");
}else if(temp==2){
$("#middleContext").html("黄色");
}else if(temp==3){
$("#middleContext").html("红色");
}else if(temp==4){
$("#middleContext").html("绿色");
}else{
$("#middleContext").html("无");
}
}else{//向上滚动
//这里的代码我没有写,如果需要，可以自己仿照上面的写出来，只是要注意颜色的顺序别乱了就行


}
}else if(e.detail){//Firefox 
if(e.detail>0){//向下滚动
$("div[id^=div]").removeAttr("style data-id");


if(index<16){
index++;
}else{
index = 1;
}

if(index==3){
$("#div3").attr("style","background-color: blue;").attr("data-id","1");
$("#div2").attr("style","background-color: yellow;").attr("data-id","2");
$("#div1").attr("style","background-color: red;").attr("data-id","3");
$("#div16").attr("style","background-color: green;").attr("data-id","4");
}else if(index==2){
$("#div2").attr("style","background-color: blue;").attr("data-id","1");
$("#div1").attr("style","background-color: yellow;").attr("data-id","2");
$("#div16").attr("style","background-color: red;").attr("data-id","3");
$("#div15").attr("style","background-color: green;").attr("data-id","4");
}else if(index==1){
$("#div1").attr("style","background-color: blue;").attr("data-id","1");
$("#div16").attr("style","background-color: yellow;").attr("data-id","2");
$("#div15").attr("style","background-color: red;").attr("data-id","3");
$("#div14").attr("style","background-color: green;").attr("data-id","4");
}else if(index>=4){
$("#div"+index).attr("style","background-color: blue;").attr("data-id","1");
$("#div"+(index-1)).attr("style","background-color: yellow;").attr("data-id","2");
$("#div"+(index-2)).attr("style","background-color: red;").attr("data-id","3");
$("#div"+(index-3)).attr("style","background-color: green;").attr("data-id","4");
}

var temp = $("#div3").attr("data-id");
if(temp==1){
$("#middleContext").html("蓝色");
}else if(temp==2){
$("#middleContext").html("黄色");
}else if(temp==3){
$("#middleContext").html("红色");
}else if(temp==4){
$("#middleContext").html("绿色");
}else{
$("#middleContext").html("无");
}
}else{//向上滚动
//这里的代码我没有写,如果需要，可以自己仿照上面的写出来，只是要注意颜色的顺序别乱了就行


}
}
}


//fireFox
if(document.addEventListener){ 
document.addEventListener('DOMMouseScroll',scrollFunc,false); 
}
//IE/Opera/Chrome 
window.onmousewheel = document.onmousewheel = scrollFunc;


});
</script>
 </body>
</html>


判断滚轮向上或向下滚动在浏览器中也要考虑兼容性，现在五大浏览器（IE、Opera、Safari、Firefox、Chrome）中Firefox 使用detail，其余四类使用wheelDelta；两者只在取值上不一致，代表含义却是一致的，detail只取±3，wheelDelta只取±120，其中正数表示为向上，负数表示向下。


在非firefox浏览器中，滚轮向上滚动返回的数值是120，向下滚动返回-120

而在firefox浏览器中，滚轮向上滚动返回的数值是-3，向下滚动返回3


js监听鼠标滚轮事件
罗俊的博客
05-23 2473
通过jquery实现鼠标滚轮事件，若ie8无法实现，降低jquery版本。通过原生js监听鼠标滚轮事件。
js捕获鼠标滚轮事件代码
10-26
本文将深入探讨如何使用JavaScript捕获鼠标滚轮事件，并通过一个实例来展示其实现过程。 首先，我们要了解JavaScript事件处理机制。在JavaScript中，我们可以使用`addEventListener`或传统的`on`属性来绑定事件监听...
js获取鼠标滚轮滚动像素
08-19
js获取鼠标滚轮滚动像素，
javascript控制鼠标滚轮事件
tiandiqing的专栏
06-22 811
function handleMouseWheel(event) { var e=window.event||event; if(e.wheelDelta0) { document.getElementById(t).innerHTML=滑轮向下滚?
js采用覆盖键、覆盖鼠标滑动事件实现禁止网页通过 ctrl + +/- 和 ctrl + 滚轮 对页面进行缩放
最新发布
weixin_44146294的博客
09-29 456
js采用覆盖键、覆盖鼠标滑动事件实现禁止网页通过 ctrl + +/- 和 ctrl + 滚轮 对页面进行缩放。
JS监听鼠标滑轮滚动事件
yalishandalee的专栏
03-01 866
http://www.jb51.net/article/42668.htm
js捕获鼠标右键菜单中的粘帖事件实现代码
10-27
在JavaScript和jQuery中，捕获鼠标右键菜单的“粘贴”事件是一个有趣且实用的技术，这主要涉及到浏览器的事件监听和DOM操作。在本文中，我们将深入探讨如何实现这一功能，以及为什么需要使用`setTimeout`来获取粘贴...
JS无法捕获滚动条上的mouse up事件的原因猜想
12-04
可是具体实现的时候我们会发现在滚动条上按下鼠标左键再松开的时候，捕获不到mouse up了。如下面例子 代码如下: <html> <head> <title></title> [removed] var captureTarget = null; ...
js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)
10-26
下面是一个简单的示例，展示了如何在不同浏览器上捕获并处理鼠标滚轮滚动事件： ```javascript // 定义滚动事件处理函数 var wheel = function(event) { var delta = 0; // 兼容IE和其他浏览器 if (!event) { ...
js监听鼠标滚动事件
first_shun的博客
07-20 4948
js中监听鼠标滚动事件，事件的名称是“mousewheel”，按正常的事件绑定即可，其中有两点关于firefox浏览器的需要注意： 1、firefox浏览器的事件名称是“DOMMouseScroll” 2、firefox的滑动值和正常的相反的 <!DOCTYPE html> <html class="no-js"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Comp
jquery监听鼠标滚轮事件+js监听滚轮事件
03-30
jquery监听鼠标滚轮事件+js监听滚轮事件， 两个例子，都可以通过！ 目前已测试 ie8 火狐，360
两种js监听滚轮事件的实现方法
11-23
前段时间在写前端的时候，需要监听浏览器的滚轮事件 网上查了一下，找到两种监听滚轮事件的方法： 一、原生js通过[removed]监听 //[removed] = function() {//为了保证兼容性，这里取两个值，哪个有值取哪一个　　var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; 　　//scrollTop就是触发滚轮事件时滚轮的高度 } 二、Jquery通过$(window).scroll()监听 $(window).scroll(functio
【VUE】JS监听鼠标上下滚动事件
sunshineTing2的博客
07-06 3845
【代码】【VUE】JS监听鼠标上下滚动事件。
【js监听鼠标滚轮】
qq_43298353的博客
05-19 912
监听鼠标滚轮运动方向。
纯js鼠标滚轮事件
weixin_55288991的博客
09-27 761
如何使用纯JavaScript快速获取鼠标滚轮事件!!! 1.打开DW *首先打开运行DW（Dreamweaver CC） *或者打开VS（Start Experimental Instance of Visual Studio）也可以 *下面演示的为2019版的DW 2.创建函数 *创建一个函数名为scrollFunc的函数（函数名可以根据自己需求定，不要求统一）并且给它 一个参数e，在控制台中打印输...
JavaScript鼠标滚轮事件
前端开发小白9527
04-11 3928
JavaScript鼠标滚轮事件
原生js监听鼠标滚轮（滑轮、中间键、中键、滚动键）点击事件、游戏竞技类鼠标侧面前进后退事件
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
06-05 1573
【代码】原生js监听鼠标滚轮（滑轮、中间键、中键）点击事件、游戏竞技类鼠标侧面前进后退事件。
JavaScript焦点、鼠标与滚轮事件详解及注意事项
})来捕获滚轮滚动事件。 在使用这些事件时，需要注意以下几点： 1. 不要滥用事件绑定，以提高性能和用户体验。 2. 确保事件处理函数能够正确处理事件对象e，以获取更多关于事件的信息。 3. 对于冒泡和捕获模式的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值