html实现商品图片放大镜，html图片放大镜预览

慕云枫

已于 2023-08-10 15:08:22 修改

阅读量1.3k

点赞数 4

分类专栏：前端前端插件效果文章标签： html 前端 javascript css 图片放大镜

于 2023-08-10 11:14:43 首次发布

本文链接：https://blog.csdn.net/weixin_43992507/article/details/132205410

版权

前端同时被 2 个专栏收录

94 篇文章 2 订阅

订阅专栏

前端插件效果

40 篇文章 0 订阅

订阅专栏

效果

在这里插入图片描述

实现

复制粘贴，修改图片路径即可使用

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>商品图片放大镜</title>
	</head>
	<style>
		body {
			margin: 0;
			padding: 0;
		}
		
		#app {
			padding: 10px;
			position: relative;
		}
		/** 默认图片*/
		
		.img-box {
			position: relative;
			left: 10px;
			top: 150px;
			width: 300px;
			height: 300px;
			text-align: center;
			border: 1px solid #83b4ff;
			border-radius: 4px;
			overflow: hidden;
			cursor: zoom-in;
		}
		
		.img1 {
			width: 100%;
			height: 100%;
		}
		
		.img-select {
			width: 100px;
			height: 100px;
			position: absolute;
			left: 0;
			top: 0;
			background: #00ff6633;
			border-radius: 4px;
			display: none;
		}
		/** 临时放大图片*/
		
		.img-temp-box {
			position: absolute;
			left: 0;
			top: 0;
			width: 400px;
			height: 400px;
			display: none;
			overflow: hidden;
		}
		
		.img2 {
			width: 200%;
			height: 200%;
			position: absolute;
			left: 0;
			top: 0;
		}
	</style>

	<body>
		<div id="app">
			<div class="img-box">
				<img src="image/2.jpeg" class="img1" />
				<div class="img-select"></div>
			</div>
		</div>
		<!-- 一般放置最外边-->
		<div class="img-temp-box">
			<img src="" class="img2" />
		</div>
	</body>
	<script>
		/**
		 * @author yyq
		 * @blogger myf
		 */
		var imgBox = document.querySelector('.img-box');
		var imgSelect = document.querySelector('.img-select');
		var imgTempBox = document.querySelector('.img-temp-box');
		var img1 = document.querySelector('.img1');
		var img2 = document.querySelector('.img2');

		// 鼠标移入
		imgBox.onmouseenter = function() {
			imgSelect.style.display = 'block';
			imgTempBox.style.display = 'block';
			var img = getElementOffset(imgBox);
			imgTempBox.style.left = (img.left + 400) + "px";
			imgTempBox.style.top = (img.top - 50) + "px";
			img2.src = img1.src;
			console.log("移入")
		}

		// 鼠标移除
		imgBox.onmouseleave = function() {
			imgSelect.style.display = 'none';
			imgTempBox.style.display = 'none';
			console.log("移除")
		}

		// 鼠标放上
		imgBox.onmousemove = function() {

			var img = getElementOffset(imgBox);

			var x = event.clientX - img.left;
			var y = event.clientY - img.top;

			console.log("xy轴：", x, '-----', y);

			var imgSelectX = x - imgSelect.offsetWidth / 2
			var imgSelectY = y - imgSelect.offsetHeight / 2

			if(imgSelectX < 0) {
				imgSelectX = 0;
			} else if(imgSelectX > imgBox.offsetWidth - imgSelect.offsetWidth) {
				imgSelectX = imgBox.offsetWidth - imgSelect.offsetWidth
			}

			if(imgSelectY < 0) {
				imgSelectY = 0;
			} else if(imgSelectY > imgBox.offsetHeight - imgSelect.offsetHeight) {
				imgSelectY = imgBox.offsetHeight - imgSelect.offsetHeight
			}

			// 小图里的小框
			imgSelect.style.left = imgSelectX + 'px';
			imgSelect.style.top = imgSelectY + 'px';

			var b = (img2.offsetHeight - imgTempBox.offsetHeight) / (imgBox.offsetHeight - imgSelect.offsetHeight)

			// 临时框里的大图片
			img2.style.left = -imgSelectX * b + "px"
			img2.style.top = -imgSelectY * b + "px"

		}

		/**
		 * 返回元素距离浏览器边框的位置（防止元素位置被父级限制）
		 * @param {Object} element
		 */
		function getElementOffset(element) {　　　　
			var left = element.offsetLeft; // 当前元素左边距
			var top = element.offsetTop; // 当前元素上边距
			var parent = element.offsetParent; // 当前元素的父级元素
			while(parent !== null) {　　　　　　
				left += parent.offsetLeft; // 累加左边距
				top += parent.offsetTop; // 累加上边距
				parent = parent.offsetParent; // 依次获取父元素
			}
			return {
				'left': left,
				'top': top
			};　　
		}
	</script>

</html>