js实现图片放大镜

最新推荐文章于 2024-07-10 10:06:23 发布

iuukai

最新推荐文章于 2024-07-10 10:06:23 发布

阅读量358

点赞数

分类专栏：简单的动画特效

本文链接：https://blog.csdn.net/weixin_45389633/article/details/111307090

版权

简单的动画特效专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		* {
			padding: 0;
			margin: 0;
			box-sizing: border-box;
		}
		.wrap {
			width: 400px;
			height: 290px;
			margin-top: 20px;
			margin-left: 20px;
		}
		.wrap,
		.container.imagezoom-wrap {
			position: relative;
		}
		/* 原图容器与大图容器这里设置为了相等 */
		.container {
			width: 100%;
			height: 100%;
			border: 1px solid #ccc;
			overflow: hidden;
		}
		.container.imagezoom-wrap .lens,
		.container.imagezoom-viewer {
			display: none;
		}
		.container.imagezoom-wrap .lens,
		.container.imagezoom-viewer,
		.container.imagezoom-viewer img {
			position: absolute;
		}
		.container.imagezoom-viewer {
			left: 460px;
			top: 0;
			border: 1px solid #000;
		}
		/* 小图与大图的比例 1:2.5 */
		.container.imagezoom-wrap img {
			width: 100%;
			height: 100%;
		}
		.container.imagezoom-viewer img {
			width: 250%;
			height: 250%;
		}
		/* 根据比例得：宽400/2.5 = 160，高亦如此 */
		.container.imagezoom-wrap .lens {
			width: 160px;
			height: 116px;
			background-color: rgba(0, 0, 0, .2);
			cursor: move;
		}
	</style>
</head>
<body>
	<div class="wrap">
		<div class="container imagezoom-wrap">
			<div class="lens"></div>
			<img src="http://dwz.date/d9YM" alt="图片加载失败...">
		</div>
		<div class="container imagezoom-viewer">
			<img src="http://dwz.date/d9YM" alt="图片加载失败...">
		</div>
	</div>
	<script type="text/javascript">
		// 获取所需元素
		const wrap = document.querySelector('.wrap');
		const primary = document.querySelector('.imagezoom-wrap');	// 主要
		const viewer = document.querySelector('.imagezoom-viewer');	// 视窗
		const lens = document.querySelector('.lens');	// 透视镜
		const Vimg = document.querySelector('.imagezoom-viewer img');	// 放大图

		// 鼠标移动执行的回调函数
		const mouseMove = e => {
			// 容器与body之间有间隙，需要移除
			// 透视镜宽高的一半，即表示鼠标指针在它中间
			// 然后，得出鼠标在容器内的X/Y轴的位置，并且定在透视镜中间
			let lens_left = e.clientX - wrap.offsetLeft - lens.offsetWidth/2;
			let lens_top = e.clientY - wrap.offsetTop - lens.offsetHeight/2;

		/* - - - - - - 透视镜控制 - - - - - - */
			// 容器减去透视镜宽高，剩余部分就是允许的X/Y轴的偏移量
			let spaceX = wrap.offsetWidth - lens.offsetWidth;
			let spaceY = wrap.offsetHeight - lens.offsetHeight;

			if (lens_left < 0) {
				lens_left = 0;
			} else if (lens_left > spaceX) {
				lens_left = spaceX;
			}

			if (lens_top < 0) {
				lens_top = 0;
			} else if (lens_top > spaceY) {
				lens_top = spaceY;
			}

			// 也可以 absolute + left/top
			lens.style.transform = `translate(${lens_left}px, ${lens_top}px)`;	// ES6字符串模板

		/* - - - - - - 放大图控制 - - - - - - */
			// 鼠标在容器内X/Y轴的坐标除以允许的偏移量，得出移动的百分比
			let percentX = lens_left / spaceX;
			let percentY = lens_top / spaceY;

			// 大图宽高减去视窗宽高，剩余部分就是允许偏移的部分【反方向移动，所以是负数】
			let Vimg_left = percentX * (Vimg.offsetWidth - viewer.offsetWidth) * -1;
			let Vimg_top = percentY * (Vimg.offsetHeight - viewer.offsetHeight) * -1;

			// 也可以 absolute + left/top
			Vimg.style.transform = `translate(${Vimg_left}px, ${Vimg_top}px)`;	// ES6字符串模板
		}

		// 鼠标移动时的监听器
		primary.addEventListener('mousemove', mouseMove, false);

		// 鼠标移出后的监听器
		primary.addEventListener('mouseout', _ => {
			lens.style.display = 'none';
			viewer.style.display = 'none';
		}, false);

		// 鼠标移入后的监听器
		primary.addEventListener('mouseover', _ => {
			lens.style.display = 'block';
			viewer.style.display = 'block';
		}, false);
	</script>
</body>
</html>