鼠标滚轮事件

最新推荐文章于 2024-06-20 18:24:23 发布

灿尔哈擦苏

最新推荐文章于 2024-06-20 18:24:23 发布

阅读量760

点赞数 1

分类专栏： web前端开发文章标签：鼠标滚轮鼠标滑轮切换禁止鼠标滚动屏蔽滚动条事件监听

本文链接：https://blog.csdn.net/susuzhe123/article/details/70259953

版权

web前端开发专栏收录该内容

82 篇文章 1 订阅

订阅专栏

鼠标的滚轮事件

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style>
	*{
		margin:0;
		padding:0;
	}
	html,body{
		width:100%;
		height:100%;
		overflow:hidden;
	}
	.big-box{
		width:100%;
		height:500%;
		color:white;
		position:absolute;
		left:0;
		top:0;
	}
	.box{
		width:100%;
		height:20%;
	}
	.box1{
		background-color:blue;
	}

	.box2{
		background-color:yellow;
	}

	.box3{
		background-color:red;
	}

	.box4{
		background-color:purple;
	}

	.box5{
		background-color:black;
	}

	.controls{
		position:absolute;
		right:20px;
		top:20%;

	}
	ul{
		list-style:none;
	}

	li{
		width:50px;
		height:50px;
		background-color:pink;
		margin-bottom:10px;
		font:bold 22px/50px "宋体";
		text-align:center;
	}
	li.active{
		background-color:white;
	}
	
  </style>
 </head>
 <body>
	<div class="big-box" id="big_box">
		<div class="box box1">
			<h1>box01</h1>
		</div>

		<div class="box box2">
			<h1>box02</h1>
		</div>

		<div class="box box3">
			<h1>box03</h1>
		</div>

		<div class="box box4">
			<h1>box04</h1>
		</div>

		<div class="box box5">
			<h1>box05</h1>
		</div>
	</div>

	<div class="controls">
		<ul>
			<li class="active">1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
	</div>
	<script>
		/*
			需求：滚轮滚动切换
			思路：
				第一步：获取到所要操作的节点对象（big_box,所有的li）
				第二步：绑定鼠标滚动滚动事件给document
				第三步：
					执行逻辑：
					关键点是：索引
		
		*/
		var big_box = document.getElementById("big_box"); //big_box
		var lis = document.getElementsByTagName("li");  //所有的li
		var index = 0;  //控制索引
		var flag = true; //开

		//onmousewheel 标准
		//DOMMouseScroll 火狐
		//绑定鼠标滚轮事件给document
		addEvent(document,"mousewheel",handler)
		addEvent(document,"DOMMouseScroll",handler)

		function handler(e){
			if(flag){
				flag = false;  //关
				var height = document.body.clientHeight; //当前屏幕的高度
				var _event = window.event||e;  //事件对象
				//detail  滚轮向上滚-3   向下：3    火狐
				//wheelDelta 滚轮向上滚120   向下：-120  IE 谷歌
				var num = _event.detail||_event.wheelDelta;  
				if(num==-3||num==120){ //滚轮向上滚
					//alert("滚轮向上↑滚");
					index--;
					if(index<0){
						index = 0;
					}
				}else{  //滚轮向下滚
					//alert("滚轮向下↓滚");
					index++;
					if(index>lis.length-1){
						index = lis.length-1;
					}
					
				}
				var v = -1*index*height + "px";
				//alert(big_Box);
				big_box.style.top = v;
				for(var i = 0;i<lis.length;i++){
					lis[i].className = "";
				}
				lis[index].className = "active";
				setTimeout(function(){
					flag = true;
				},1000)

		  }
		}

	  /*
		小工具：实现事件监听的兼容处理
		参数：
			dom：事件目标
			type:事件类型
			fn：事件处理程序
	  */
		function addEvent(dom,type,fn){
			if(dom.addEventListener){
				dom.addEventListener(type,fn);
			}else{
				dom.attachEvent("on" + type,fn);
			}
		}


	</script>
 </body>
</html>

禁止滚轮事件

$(document).bind("mousewheel",function(){
	return  false;
});

不让屏幕出现滚动条

body:{overflow-y:hidden;}

灿尔哈擦苏

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录