仿电商放大镜功能

最新推荐文章于 2024-10-08 10:16:40 发布

美式要加冰

最新推荐文章于 2024-10-08 10:16:40 发布

阅读量87

点赞数

分类专栏：前端 # JavaScript 文章标签： css javascript html 前端 html5

本文链接：https://blog.csdn.net/Scccc_/article/details/123326594

版权

前端同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

JavaScript

7 篇文章 0 订阅

订阅专栏

该博客介绍了如何使用JavaScript和CSS实现一个大图预览功能，当鼠标移动到小图上时，显示一个带有遮罩层的放大图片，并且遮罩层可以随着鼠标移动。通过计算鼠标位置和限制移动范围，实现了遮罩层和大图的同步移动，为用户提供了一个交互式的预览体验。

摘要由CSDN通过智能技术生成

实现功能

思路

遮罩层移动

大图片移动

代码实现

	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		.preview_img {
			position: relative;
			border: 1px solid #CCCCCC;
			height: 400px;
			width: 400px;
		}

		.preview img {}

		.mask {
			display: none;
			position: absolute;
			top: 0;
			left: 0;
			height: 300px;
			width: 300px;
			background-color: #fede4f;
			border: 1px solid #CCCCCC;
			opacity: .5;
			cursor: move;
		}

		.big {
			display: none;
			position: absolute;
			top: 0;
			left: 410px;
			width: 500px;
			height: 500px;
			border: 1px solid #CCCCCC;
			overflow: hidden;
		}
        
        //图片不设置定位，无法移动
		.big img {
			position: absolute;
			top: 0;
			left: 0;
		}
	</style>
	<body>
		<div class="preview_img">
			<img src="img/load.png" />
			<div class="mask"></div>
			<div class="big">
				<img src="img/load-big.jpg" class="bigImg">
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var preview_img = document.querySelector('.preview_img');
		var mask = document.querySelector('.mask');
		var big = document.querySelector('.big');
		//1.当鼠标经过preview_img 就显示隐藏mask遮挡层，和big大盒子
		preview_img.addEventListener('mouseover', function() {
			mask.style.display = 'block';
			big.style.display = 'block';
		})
		preview_img.addEventListener('mouseout', function() {
			mask.style.display = 'none';
			big.style.display = 'none';
		})
		//2.鼠标移动让黄色盒子跟着鼠标走
		preview_img.addEventListener('mousemove', function(e) {
			//(1)先计算出鼠标在盒子内的坐标
			var x = e.pageX - this.offsetLeft;
			var y = e.pageY - this.offsetTop;
			//(2)减去盒子高度的一般，保证鼠标在中间
			var maskX = x - mask.offsetWidth / 2;
			var maskY = y - mask.offsetHeight / 2;
			//(3)黄色盒子不能出小盒子范围。
			//(3).1 如果x坐标小于0就让停在0的位置，大于小盒子宽度减去遮挡层宽度
			//遮挡层最大移动距离（正方形，长宽一样）
			var maskMax = preview_img.offsetWidth - mask.offsetWidth;
			if (maskX < 0) {
				maskX = 0;
			} else if (maskX >= maskMax) {
				maskX = maskMax;
			}
			//(3).2 如果y坐标小于0就让停在0的位置,大于小盒子高度减去遮挡层高度
			if (maskY < 0) {
				maskY = 0;
			} else if (maskY >= maskMax) {
				maskY = maskMax;
			}

			mask.style.left = maskX + 'px';
			mask.style.top = maskY + 'px';

			//大图片移动距离=遮挡层移动距离*大图片最大移动距离 / 遮挡层最大移动距离
			var bigImg = document.querySelector('.bigImg');
			//大图最大移动距离
			var bigMax = bigImg.offsetWidth - big.offsetWidth;
			//大图片移动距离 bigX 和 bigY
			var bigX = maskX * bigMax / maskMax;
			var bigY = maskY * bigMax / maskMax;

			bigImg.style.left = -bigX + 'px';
			bigImg.style.top = -bigY + 'px';
		})
	</script>