js實現圖片放大鏡

阿新 • • 發佈：2020-12-21

在這裡插入圖片描述

<!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>