js的鼠标滚轮事件

最新推荐文章于 2022-01-27 21:08:33 发布

Agwenbi

最新推荐文章于 2022-01-27 21:08:33 发布

阅读量569

点赞数

分类专栏： JavaScript 文章标签： js鼠标滚轮事件

本文链接：https://blog.csdn.net/Ag_wenbi/article/details/53168209

版权

JavaScript 专栏收录该内容

47 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box{width: 200px;height: 200px;background-color: red;position: absolute;}
		</style>
		<script type="text/javascript">
			window.onload=function(){
				var oBox=document.getElementById('box');//找到对应的盒子
				oBox.onmousewheel=fn;//onmousewheel兼容IE和谷歌，不兼容火狐
				if(oBox.addEventListener){//addEventListenner绑定事件，兼容非IE，attachEvent兼容IE
					oBox.addEventListener('DOMMouseScroll',fn,false);//DOMMouseScroll兼容火狐
				}
				var b=true;
				function fn(ev){
					var iEvent=ev||event;
					if(iEvent.wheelDelta){//鼠标上滚和下滚事件，wheelDelta兼容IE和谷歌不兼容火狐，上滚为120，下滚为-120
						b=iEvent.wheelDelta>0?b=true:b=false;
					}
					else{
						b=iEvent.detail>0?b=false:b=true;//detail兼容火狐，上滚为-3，下滚为3
					}
					if(b){
						oBox.style.height=oBox.offsetHeight+10+'px';
					}
					else{
						oBox.style.height=oBox.offsetHeight-10+'px';
					}
				}
			}
		</script>
	</head>
	<body>
		<div id="box">
			
		</div>
	</body>
</html>

Agwenbi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
js的鼠标滚轮事件

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; #box{width: 200px;height: 200px;ba
复制链接

扫一扫