mousewheel鼠标滚轮事件响应及实例

mousewheel鼠标滚轮事件响应

兼容性：

除了FireFox浏览器的滚轮事件响应使用的是DOMMouseScroll以外，其余浏览器均使用的是onmousewheel（在使用addEventListener()添加监听事件的时候就把“onmousewheel”的“on”去掉，变成“mousewheel”。“onclick”等监听事件也是一样。）

使用：

document.body.onmousewheel = function(event){...编写响应函数...}

响应函数有event作参数，event有属性wheelDelta，鼠标滚轮向下滚动时event.wheelDelta属性值为负且是-120的倍数，相反，鼠标滚轮向上滚动时event.wheelDelta属性值为正且是120的倍数。（不同浏览器鼠标一次滚动时这个属性值变化值不一样，有的甚至连续滚动几次后会属性值变化会加快。不妨在网页中输出观察一下。）

实例

实现一个简单的进度条可以随着鼠标的滚动而变化进度：

首先用bootstrap4创建一个简单的进度条：

<div class="container"><div id="c"><h2>基本进度条</h2><p>要创建一个默认的进度条，可以在容器元素上添加 .progress 类，在子元素上添加 progress-bar 类，并设置进度条进度情况：:</p><div class="progress" id="1" onclick="change()"><div class="progress-bar" style="width:0%"></div></div><input type="button" id="btn" value="确定"><p></p></div><div id="space"></div></div>

初始默认进度为0。（style="width:0%"）

然后在<script>里<body>的滚轮响应监听事件中，用JS的DOM根据event.wheelDelta修改wdth这一属性值：

document.body.onmousewheel = function(event){var or = document.getElementsByClassName("progress-bar")[0].style.width;document.getElementsByTagName("p")[1].innerHTML = ""+or+" "+event.wheelDelta+"";document.getElementsByClassName("progress-bar")[0].style.width="calc("+or+" + "+(-event.wheelDelta/100)+"%)";}

document.body.onmousewheel = function(event){}创建监听事件，当然你也可以用其他方法添加监听事件，但一定要带上参数event。

在监听事件里，var or = document.getElementsByClassName("progress-bar")[0].style.width;用一个变量or保存当前width的属性值。

document.getElementsByTagName("p")[1].innerHTML = ""+or+" "+event.wheelDelta+"";用DOM获取第二个<p>标签，在标签内装填当前进度值和event.wheelDelta属性值显示出来。

document.getElementsByClassName("progress-bar")[0].style.width="calc("+or+" + "+(-event.wheelDelta/100)+"%)";使用CSS3的calc()函数来将进度变化值(-event.wheelDelta/100)加在原有的进度or上，注意做+-的时候，运算符前后要有空格。

mousewheel鼠标滚轮事件响应及实例相关推荐

C# 中panel的mousewheel鼠标滚轮事件触发
如果将窗体或容器控件(如Panel控件)的AutoScroll属性设置为True时,那么当窗体或Panel容不下其中的子控件时就会出现滚动条,通过移动滚动条可以上下显示出窗体或Panel中的全部内容 ...
Winform 中panel的mousewheel鼠标滚轮事件触发
如果将窗体或容器控件(如Panel控件)的AutoScroll属性设置为True时,那么当窗体或Panel容不下其中的子控件时就会出现滚动条,通过移动滚动条可以上下显示出窗体或Panel中的全部内容 ...
C# 中手动添加Mousewheel鼠标滚轮事件
如果将窗体或容器控件(如Panel控件)的AutoScroll属性设置为True时,那么当窗体或Panel容不下其中的子控件时就会出现滚动条,通过移动滚动条可以上下显示出窗体或Panel中的全部内容 ...
java响应鼠标滚轮事件_鼠标滚轮事件MouseWheel
其实在大多数浏览器(IE6, IE7, IE8, Opera 10+, Safari 5+,Chrome)中,都提供了 "mousewheel" 事件.但杯具的是 Firefox ...
html如何设置滑轮效果,HTML中鼠标滚轮事件onmousewheel处理
滚轮事件是不同浏览器会有一点点区别,一个像Firefox使用DOMMouseScroll ,ff也可以使用addEventListener方法绑定DomMouseScroll事件,其他的浏览器滚轮事件 ...
java响应鼠标滚轮事件_一文读懂鼠标滚轮事件（wheelEvent）
最近在用VUE写一个后台管理系统,顶部标签页涉及鼠标滚轮事件,由于每个浏览器对滚轮事件的处理方式不一样,个人对这个又不懂,折腾了很久,参考了大神的代码,也把百度翻烂了,找到了一篇陈旧的博文(其实是主题 ...
Python+matplotlib响应鼠标滚轮事件调整图形大小
2021年全国高校Python课程高级研修班(线上) 中国大学MOOC"Python程序设计基础"第4次开课推荐图书: <Python程序设计(第3版)>,(ISBN ...
鼠标滚轮事件（mousewheel / DOMMouseScroll）兼容性处理
鼠标滚轮事件(mousewheel / DOMMouseScroll)兼容性处理非Firefox浏览器中在非 Firefox 浏览器中,使用 mousewheel 事件来监听鼠标的滚轮事件,通过事 ...
JS鼠标滚轮事件mousewheel实现翻页（记录）
JS鼠标滚轮事件mousewheel实现翻页(PPT?) 整体思路(趁还能看懂自己的代码) 1.我想模拟那些不用滚动条,像PPT一样滚动的页面,于是乎想到了mousewheel事件 2.我又想再页面右 ...

mousewheel鼠标滚轮事件响应及实例

mousewheel鼠标滚轮事件响应

实例

mousewheel鼠标滚轮事件响应及实例相关推荐

最新文章

热门文章