js实现放大镜效果

编程小号 • 2023-10-25 10:11 • 未分类

思路：

先让mask块和bigImg块、big块隐藏，当鼠标经过pre_img就显示遮罩层mask和big块，获取鼠标当前的位置，根据“ 大图片移动距离 = 遮挡层移动距离*大图片最大移动距离 / 遮挡层最大移动距离 ”实现放大镜效果

html + css 代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入js文件 --> 
		<script src="js/放大镜.js" ></script>	
		<style>
			*{
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			img{
				width: 100%;
				height: 100%;
			}
			.pre_img{
				position: relative;
				width: 200px;
				height: 200px;
				margin: 100px;
				border: 1px solid #ccc;
			}
			.mask{
				position: absolute;
				top: 0;
				left: 0;
				width: 100px;
				height: 100px;
				background-color:#FEDE4F;
				opacity: .6;/* 设置透明度 */
				cursor: move;
				display: none;
			}
			.big img{
				width: 500px;
				height: 500px;
				position: absolute;
				top: 0;
				left: 0;
			}
			.big{
				overflow: hidden;
				display: none;
				position: absolute;
				left: 200px;
				top: 0;
				width: 250px;
				height: 250px; 
				border: 1px solid #ccc;
				z-index: 999;
			}
		</style>
	</head>
	<body>
		<div class="pre_img">
			<img src="img/jd.jpg" >
			<div class="mask"></div>
			<div class="big">
				<img src="img/jd.jpg" class="bigImg">
			</div>
		</div>
	</body>
</html>

js 代码：

window.addEventListener('load',function(){//一定要先写这个(先加载完html)
	var pre_img = document.querySelector('.pre_img');
	var mask = document.querySelector('.mask');
	var big = document.querySelector('.big');
	//1、当鼠标经过pre_img就显示遮罩层mask和big
	pre_img.addEventListener('mouseover',function(){
		mask.style.display = 'block';
		big.style.display = 'block';
	})
	pre_img.addEventListener('mouseout',function(){
		mask.style.display = 'none';
		big.style.display = 'none';
	})
	//2、计算鼠标在盒子内的坐标
	pre_img.addEventListener('mousemove',function(e){
		var x = e.pageX - this.offsetLeft;
		var y = e.pageY - this.offsetTop;
		//让鼠标处于mask的正中央
		var maskX = x - mask.offsetWidth/2;
		var maskY = y - mask.offsetHeight/2;
		// 让遮罩层只能在盒子内移动
		var maskMax = pre_img.offsetWidth - mask.offsetWidth;
		if(maskX <= 0){
			maskX = 0;
		}else if (maskX >= maskMax){
			maskX = maskMax;
		}
		if(maskY <= 0){
			maskY = 0;
		}else if (maskY >= maskMax){
			maskY = maskMax;
		}
		mask.style.left = maskX + 'px';
		mask.style.top = maskY + 'px';
		//根据等比例放大
		//3、大图片移动距离 = 遮挡层移动距离*大图片最大移动距离 / 遮挡层最大移动距离		
		var bigImg = document.querySelector('.bigImg');
		//大图移动距离
		var bigX = maskX * 500 / 200;//大图/小图 
		var bigY= maskY * 500 / 200;
		//大图的移动(方向相反，取负值)
		bigImg.style.left = -bigX + 'px';
		bigImg.style.top = -bigY + 'px';
	})
})

效果图：