js放大镜

最新推荐文章于 2023-04-14 21:57:05 发布

miss-ddly

最新推荐文章于 2023-04-14 21:57:05 发布

阅读量65

点赞数

文章标签： css html 前端

本文链接：https://blog.csdn.net/m0_69759037/article/details/127953605

版权

1.在页面中放置两个盒子，大盒子隐藏，

2.大，小盒子放置图片，鼠标经过小盒子显示大盒子图片。

3.获取光标的坐标轴，给大盒子图片移动距离。

<!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>Document</title>
	<link rel="stylesheet" href="./reset.css">
	<style>
		.box {
			width: 200px;
			height: 300px;
			margin: 100px 0 0 100px;
		}

		.content {
			width: 200px;
			height: 300px;
			position: relative;
			border: 1px solid #ccc;
		}

		.content>img {
			width: 200px;
			height: 300px;
		}

		.mask {
			width: 100px;
			height: 100px;
			background-color: yellow;
			opacity: 0.5;
			position: absolute;
			top: 0;
			left: 0;
			border: 1px solid #ccc;
			display: none;
		}

		.big {
			width: 500px;
			height: 500px;
			position: absolute;
			top: 0;
			left: 410px;
			border: 1px solid #ccc;
			overflow: hidden;
			display: none;
		}

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

<body>
	<div class="box">
		<div class="content">
			<img src="./a.jpeg" alt="">
			<div class="mask"></div>
			<div class="big">
				<img src="./a.jpeg" alt="">
			</div>
		</div>

	</div>
	<script>
		// 获取标签
		let content = document.querySelector('.content')
		let mask = document.querySelector('.mask')
		let big = document.querySelector('.big')

		// 鼠标进入改变样式
		content.addEventListener('mouseenter', function () {
			mask.style.display = 'block'
			big.style.display = 'block'
		})
		// 鼠标离开还原样式
		content.addEventListener('mouseleave', function () {
			mask.style.display = 'none'
			big.style.display = 'none'
		})
		// 鼠标进入图片并移动
		content.addEventListener('mousemove', function (e) {
			//  获取鼠标在页面中的坐标(pageX)
			//offsetTop 元素到顶部的距离
			let x = e.pageX - content.offsetLeft
			let y = e.pageY - content.offsetTop
			// offsetWidth 是元素的宽度
			let maskX = x - mask.offsetWidth / 2
			let maskY = y - mask.offsetHeight / 2;
			let XMAX = content.offsetWidth - mask.offsetWidth
			let YMAX = content.offsetHeight - mask.offsetHeight
			// 判断 maskX 坐标小于了0 就让他停在0 的位置
			if (maskX <= 0) {
				maskX = 0
			} else if (maskX >= XMAX) {
				maskX = XMAX
			}
			if (maskY <= 0) {
				maskY = 0
			} else if (maskY >= YMAX) {
				maskY = YMAX
			}
			mask.style.left = maskX + 'px'
			mask.style.top = maskY + 'px'
			let img = document.querySelector('.big>img')
			// 大盒子图片的移动距离 = 遮挡层移动距离 * 大图片最大移动距离 / 遮挡层的最大移动距离
			imgXMax = img.offsetWidth - big.offsetWidth
			imgYMax = img.offsetHeight - big.offsetHeight
			img.style.left = -maskX * imgXMax / XMAX + 'px'
			img.style.top = -maskY * imgYMax / YMAX + 'px'
		})
	</script>
</body>

</html>