白学的小知识[放大镜]-CSDN博客

本文链接：https://blog.csdn.net/c_made_c/article/details/138803127

代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		.box {
			margin: 150px;
			overflow: hidden;
		}
		.big {
			display: none;
			width: 400px;
			height: 400px;
			margin-left: 10px;
			overflow: hidden;
			position: relative;
		}
		.small {
			width: 400px;
			height: 400px;
			float: left;
			position: relative;
		}
		.shadow {
			display: none;
			position: absolute;
			top: 0;
			left: 0;
			width: 200px;
			height: 200px;
			background-color: #fff;
			opacity: 0.5;
		}

		.big img {
			position: absolute;
			left: 0;
			top: 0;
		}
	</style>
</head>

<body>
	<!-- 一个大盒子 -->
	<div class="box">
		<!-- 小图片的盒子 -->
		<div class="small">
			<!-- 小图片 -->
			<img style="width: 400px; height: 400px;" src="1.jpg" alt="">
			<!-- 阴影 -->
			<span class="shadow"></span>
		</div>
		<!-- 大图片的盒子 -->
		<div class="big">
			<!-- 大图片 相当于2倍图 -->
			<img style="width: 800px; height: 800px;" src="1.jpg" alt="">
		</div>
	</div>
</body>
<script>
	//获取box
	var box = document.querySelector(".box")
	//获取小图片盒子
	var small = document.querySelector(".small")
	//获取阴影
	var shadow = document.querySelector(".shadow")
	// console.log(shadow);
	//获取大图片盒子
	var big = document.querySelector(".big")
	//获取图片
	var img = document.querySelector(".big img")
	//给小图片盒子设置移入事件
	small.onmouseover = function () {
		//移入阴影盒子显示
		shadow.style.display = "block"
		//移入大图片盒子显示
		big.style.display = "block"
	}
	//小盒子移出事件
	small.onmouseout = function () {
		//移出阴影盒子隐藏
		shadow.style.display = "none"
		//移出大盒子隐藏
		big.style.display = "none"
	}
	//小盒子鼠标移动事件
	small.onmousemove = function (e) {
		//鼠标的距离 - 盒子距离浏览器的距离 - 盒子自身一半的距离 = 向左或者向上距离阴影盒子的距离
		var x = e.clientX - box.offsetLeft - shadow.offsetWidth / 2
		var y = e.clientY - box.offsetTop - shadow.offsetHeight / 2
		if (x < 0) {
			x = 0
		} else if (x > small.offsetWidth - shadow.offsetWidth) {
			x = small.offsetWidth - shadow.offsetWidth
		}
		if (y < 0) {
			y = 0
		} else if (y > small.offsetHeight - shadow.offsetHeight) {
			y = small.offsetHeight - shadow.offsetHeight
		}
		shadow.style.left = x + "px"
		shadow.style.top = y + "px"
		//因为图片是从右向左移,所以要是-的x和y,大图片比小的大2倍,乘于2
		img.style.left = -x * 2 + "px"
		img.style.top = -y * 2 + "px"
	}
</script>
</html>

样式：

放大镜