HTML之鼠标滚动事件

最新推荐文章于 2024-08-14 17:15:24 发布

一岁-枯荣

最新推荐文章于 2024-08-14 17:15:24 发布

阅读量4.2k

点赞数 1

分类专栏： HTML 文章标签：鼠标滚动事件HTML效果

本文链接：https://blog.csdn.net/qq_40401942/article/details/78116860

版权

HTML 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

HTML之鼠标滚动事件：

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
	body{
	margin: 0;
	padding: 0;
	}
	.cont{
	height: 10000px;
	}
	#top{
	position: fixed;
	width: 100%;
	height: 50px;
	top: 0px;
	left: 0px;
	background-color: pink;
	display: none;
	}

	#left{
	position: fixed;
	top: 150px;
	left: 20px;
	height: 500px;
	width: 50px;
	background-color: green;
	display: none;
	}
	#left ul{
	list-style: none;
	padding-left: 0px;
	}
	#left ul li{
	border: 1px solid gray;
	margin: 15px auto;
	height: 30px;
	line-height: 30px;
	text-align: center;
	}

	.a{
	border: 1px solid #FFFFFF;
	color: #FFFFFF;
	}

	</style>

	<script>

	// var a = 0;

	//滚动事件
	function myScroll(){
	// a++;

	var i = document.body.scrollTop;
	var top = document.getElementById("top");
	var left = document.getElementById("left");
	var f1 = document.getElementById("f1");
	var f2 = document.getElementById("f2");
	var f3 = document.getElementById("f3");
	var f4 = document.getElementById("f4");
	var f5 = document.getElementById("f5");

	//控制顶部
	if(i >= 1000){
	top.style.display = "block";
	top.innerHTML = i;
	}else{
	top.style.display = "none";
	}

	//控制左侧
	if(i >= 2000){
	left.style.display = "block";
	}else{
	left.style.display = "none";
	}

	//显示楼层
	if(i >= 2000 && i<=2500){
	f1.className = "a";
	f2.className = "";
	f3.className = "";
	f4.className = "";
	f5.className = "";
	}else if(i>2500 && i<=3000){
	f1.className = "";
	f2.className = "a";
	f3.className = "";
	f4.className = "";
	f5.className = "";
	}else if(i>3000 && i<=3500){
	f1.className = "";
	f2.className = "";
	f3.className = "a";
	f4.className = "";
	f5.className = "";
	}else if(i>3500 && i<=4000){
	f1.className = "";
	f2.className = "";
	f3.className = "";
	f4.className = "a";
	f5.className = "";
	}else if(i>4000 && i<=4500){
	f1.className = "";
	f2.className = "";
	f3.className = "";
	f4.className = "";
	f5.className = "a";
	}

	}

	</script>

	</head>
	<body onscroll="myScroll()">

	<div id="left">
	<ul>
	<li id="f1">1F</li>
	<li id="f2">2F</li>
	<li id="f3">3F</li>
	<li id="f4">4F</li>
	<li id="f5">5F</li>
	</ul>
	</div>

	<div id="top"></div>
	<div class="cont"></div>

	</body>
	</html>