使用JavaScript实现放大镜效果（有详细注释）

最新推荐文章于 2024-06-05 10:01:56 发布

chirrupy_YI

最新推荐文章于 2024-06-05 10:01:56 发布

阅读量2.5k

点赞数 5

本文链接：https://blog.csdn.net/chirrupy_YI/article/details/131229999

版权

效果图

如何使用JavaScript实现放大镜效果大概思路

小知识点

效果图

如何使用JavaScript实现放大镜效果大概思路：

先用两个div来存放图片，一个存放原始图片，一个存放放大后的图片
再来一个遮罩层，设置成半透明，并实现遮罩层随着鼠标移动而移动
在计算遮罩层不可超出容器范围
计算放大图片的位置，并显示放大后的位置

一、存放图片代码：

<div class="smDiv">
	<img src="img/smallpic.jpg" alt="" />
    <div class="zoom"></div>
</div>
<div class="bigDiv">
	<img src="img/bigpic.jpg" alt="" />
</div>

二、css代码：

.smDiv {
	width: 300px;
	height: 225px;
	border: 1px solid #000;
	position: relative;
}
.bigDiv {
	position: absolute;
	top: 8px;
	left: 330px;
	width: 330px;
	height: 330px;
	overflow: hidden;
	border: 1px solid #000;
	display: none;
}
.zoom {
	width: 110px;
	height: 111px;
	z-index: 99;
	background-color: #8484847b;
	position: absolute;
	top: 0;
	left: 0;
	cursor: move;
	pointer-events: none;
	display: none;
}
.bigDiv > img {
	position: absolute;
	top: 0;
	left: 0;
}

三、js代码：

<script>
	var smDiv = document.querySelector(".smDiv"); //获取小图容器
	var bigDiv = document.querySelector(".bigDiv"); //获取放大图容器
	var zoom = document.querySelector(".zoom"); //获取放大器
	var bigImg = document.querySelector(".bigDiv>img"); //获取放大后大图

	//光标移入悬浮在小图容器
	smDiv.addEventListener("mouseover", function (e) {
		zoom.style.display = "block";
		bigDiv.style.display = "block";
	});
	//光标移出小图容器
	smDiv.addEventListener("mouseout", function (e) {
		zoom.style.display = "none";
		bigDiv.style.display = "none";
	});

	smDiv.addEventListener("mousemove", function (e) {
		//计算放大镜的top
		var top = e.offsetY - zoom.offsetHeight / 2;
        //计算放大镜的left
		var left = e.offsetX - zoom.offsetWidth / 2;

		//计算放大镜最大的top与left
		var maxTop = smDiv.clientHeight - zoom.offsetHeight;
		var maxLeft = smDiv.clientWidth - zoom.offsetWidth;

		//限制放大镜移动范围不可超过小图容器的边界
		top = top < 0 ? 0 : top;
		top = top > maxTop ? maxTop : top;
		left = left < 0 ? 0 : left;
		left = left > maxLeft ? maxLeft : left;

		// 放大镜的位置
		zoom.style.top = top + "px";
		zoom.style.left = left + "px";

		//放大图在容器中的位置，大图是小图的三倍，所以乘以3
		bigImg.style.top = -3 * top + "px";
		bigImg.style.left = -3 * left + "px";
	});
</script>

小知识点：

     offsetX：鼠标坐标到元素的左侧的距离
     offsetWidth：除了外边距(margin)以外,所有的宽度(高度)之和

     offsetY：鼠标坐标到元素顶部的距离
     offsetHeight：元素的像素高度，包含元素的垂直内边距和边框，水平滚动条的高度，且是一个整数

四、超完整代码如下：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>JavaScript实现放大镜效果</title>
		<style>
			.smDiv {
				width: 300px;
				height: 225px;
				border: 1px solid #000;
				position: relative;
			}
			.bigDiv {
				position: absolute;
				top: 8px;
				left: 330px;
				width: 330px;
				height: 330px;
				overflow: hidden;
				border: 1px solid #000;
				display: none;
			}
			.zoom {
				width: 110px;
				height: 111px;
				z-index: 99;
				background-color: #8484847b;
				position: absolute;
				top: 0;
				left: 0;
				cursor: move;
				pointer-events: none;
				display: none;
			}
			.bigDiv > img {
				position: absolute;
				top: 0;
				left: 0;
			}
		</style>
    </head>
    <body>
		<div class="smDiv">
			<img src="img/smallpic.jpg" alt="" />
			<div class="zoom"></div>
		</div>
		<div class="bigDiv">
			<img src="img/bigpic.jpg" alt="" />
		</div>

		<script>
			var smDiv = document.querySelector(".smDiv"); //获取小图容器
			var bigDiv = document.querySelector(".bigDiv"); //获取放大图容器
			var zoom = document.querySelector(".zoom"); //获取放大器
			var bigImg = document.querySelector(".bigDiv>img"); //获取放大后大图

			//光标移入悬浮小图容器
			smDiv.addEventListener("mouseover", function (e) {
				zoom.style.display = "block";
				bigDiv.style.display = "block";
			});
			//光标移出小图容器
			smDiv.addEventListener("mouseout", function (e) {
				zoom.style.display = "none";
				bigDiv.style.display = "none";
			});

			smDiv.addEventListener("mousemove", function (e) {
				//计算放大镜的top
				// offsetY:鼠标坐标到元素顶部的距离
				// offsetHeight：元素的像素高度，包含元素的垂直内边距和边框，水平滚动条的高度，且是一个整数
				var top = e.offsetY - zoom.offsetHeight / 2;

				//计算放大镜的left
				// offsetX:鼠标坐标到元素的左侧的距离
				// offsetWidth:除了外边距(margin)以外,所有的宽度(高度)之和
				var left = e.offsetX - zoom.offsetWidth / 2;

				//计算放大镜最大的top与left
				var maxTop = smDiv.clientHeight - zoom.offsetHeight;
				var maxLeft = smDiv.clientWidth - zoom.offsetWidth;

				//限制放大镜移动范围不可超过小图容器的边界
				top = top < 0 ? 0 : top;
				top = top > maxTop ? maxTop : top;
				left = left < 0 ? 0 : left;
				left = left > maxLeft ? maxLeft : left;

				// 放大镜的位置
				zoom.style.top = top + "px";
				zoom.style.left = left + "px";

				//放大图在容器中的位置，大图是小图的三倍，所以乘以3
				bigImg.style.top = -3 * top + "px";
				bigImg.style.left = -3 * left + "px";
			});
		</script>
	</body>
</html>

JavaScript实现放大镜效果的代码就分享到这里啦，如有错误，欢迎指出~