js实现图片放大镜效果

最新推荐文章于 2024-04-24 09:27:42 发布

06960696

最新推荐文章于 2024-04-24 09:27:42 发布

阅读量1.3k

点赞数 1

文章标签： html 前端

本文链接：https://blog.csdn.net/weixin_46099013/article/details/126020480

版权

实现思路：设立一大一小两个盒子，盒子中放置图片，右边大盒子中的图片设置放大倍数（如200%），左边的遮罩层与右边大盒子默认隐藏显示，为左边盒子设置鼠标移入监听，当鼠标移入时遮罩层与右边大盒子显示，并设置鼠标移动事件将鼠标在盒子内的坐标赋值给遮罩层，使得遮罩层移动，而右边的大图片需根据两边图片大小比例计算坐标比例并赋值，使得大图片移动。最后在鼠标移出div时监听鼠标移出事件，移出时遮罩层与大盒子隐藏。

js部分代码：（下方有完整的）

鼠标移入监听：

监听鼠标移入小盒子显示遮罩层与大盒子

show.addEventListener('mouseover', function() {
		fullShow.style.display = 'block';
		bigShow.style.display = 'block';
		//在鼠标移入时遮罩层和大盒子切换为显示状态
	})

鼠标移出监听：

监听鼠标移出小盒子隐藏遮罩层与大盒子

	show.addEventListener('mouseout', function() {
		fullShow.style.display = 'none';
		bigShow.style.display = 'none';
		//在鼠标移出时遮罩层和大盒子切换为隐藏状态
	})

鼠标移动监听：

show.addEventListener('mousemove', function(e) {
		//鼠标移动监听
		var moveX = e.pageX - show.offsetLeft;
		//鼠标在div中的x坐标
		var moveY = e.pageY - show.offsetTop;
		//鼠标在div中的y坐标
		var sMoveMax = show.offsetWidth - fullShow.offsetWidth;
		//遮罩层与盒子的大小差
		var sHalf = fullShow.offsetWidth / 2;
		//遮罩层大小的一半
		var bMoveX = moveX * bigShow.offsetWidth / show.offsetWidth;
		var bMoveY = moveY * bigShow.offsetWidth / show.offsetWidth;
		//大盒子图片的移动距离
		//根据两边图片显示大小得出大图片移动比例
		if (moveX <= sHalf) {
			fullShow.style.left = 0;
			//当遮罩层到达div边界时 遮罩层不再往外移动
		} else if (moveX >= sMoveMax + sHalf) {
			fullShow.style.left = sMoveMax + sHalf;
			//当遮罩层到达div边界时 遮罩层不再往外移动
		} else {
			fullShow.style.left = moveX - sHalf + 'px';
			//将鼠标在盒子中的坐标赋值给遮罩层 减到sHalf使得鼠标在遮罩层x轴中心
		}

		if (moveY <= sHalf) {
			fullShow.style.top = 0;
			//当遮罩层到达div边界时 遮罩层不再往外移动
		} else if (moveY >= sMoveMax + sHalf) {
			fullShow.style.top = sMoveMax + sHalf;
			//当遮罩层到达div边界时 遮罩层不再往外移动
		} else {
			fullShow.style.top = moveY - sHalf + 'px';
			//将鼠标在盒子中的坐标赋值给遮罩层 减到sHalf使得鼠标在遮罩层y轴中心
		}
		bigImg.style.left = -bMoveX + 'px';
		bigImg.style.top = -bMoveY + 'px';
		//根据得来的大图片的移动距离赋值，由于大图片的移动效果与小图片是反方向的，所以取负值
	})

完整html代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				//边距清零
			}
			#banner{
				margin-top: 50px;
				margin-left: 100px;
				
			}
			#show {
				width: 400px;
				height: 400px;
				border: 1px solid #DDDDDD;
				cursor: move;
				position: relative;
				//为父元素设置相对定位	
			}

			.smallImg {
				width: 100%;
				height: 100%;
			}
			.fullShow{
				display: none;
				width: 250px;
				height: 250px;
				background-color: coral;
				position: absolute;
				top: 0;
				left: 0;
				opacity: 0.5;
				//遮罩层默认隐藏
				//根据父元素设置绝对定位
			}
			.bigShow{
				display: none;
				width: 600px;
				height: 600px;
				border: 1px solid #DDDDDD;
				position: absolute;
				left: 440px;
				overflow: hidden;
				top: 0;
				//大div默认隐藏
				//图片溢出时隐藏溢出部分
			}
			.bigImg{
				width: 180%;
				height: 180%;
				position: relative;
				top: 0;
				left: 0;
				//设置图片显示倍数
				//设置相对定位
			}
		</style>
	</head>
	<script src="js/图片放大镜.js"></script>
	<body>
		<div id="banner">
			<div id="show">
				<img class="smallImg" src="img/18pro.jpg" />
				<div class="fullShow"></div>
				<div class="bigShow">
					<img class="bigImg" src="img/18pro.jpg" >
				</div>
			</div>
		</div>
	</body>
</html>

完整js代码:

window.addEventListener('load', function() {
	var show = document.querySelector('#show');
	var fullShow = document.querySelector('.fullShow');
	var bigShow = document.querySelector('.bigShow');
	var bigImg = document.querySelector('.bigImg');
	show.addEventListener('mouseover', function() {
		fullShow.style.display = 'block';
		bigShow.style.display = 'block';
		//在鼠标移入时遮罩层和大图片切换为显示状态
	})
	show.addEventListener('mouseout', function() {
		fullShow.style.display = 'none';
		bigShow.style.display = 'none';
		//在鼠标移出时遮罩层和大图片切换为隐藏状态
	})
	show.addEventListener('mousemove', function(e) {
		//鼠标移动监听
		var moveX = e.pageX - show.offsetLeft;
		//鼠标在div中的x坐标
		var moveY = e.pageY - show.offsetTop;
		//鼠标在div中的y坐标
		var sMoveMax = show.offsetWidth - fullShow.offsetWidth;
		//遮罩层与盒子的大小差
		var sHalf = fullShow.offsetWidth / 2;
		//遮罩层大小的一半
		var bMoveX = moveX * bigShow.offsetWidth / show.offsetWidth;
		var bMoveY = moveY * bigShow.offsetWidth / show.offsetWidth;
		//大盒子图片的移动距离
		//根据两边图片显示大小得出大图片移动比例
		if (moveX <= sHalf) {
			fullShow.style.left = 0;
			//当遮罩层到达div边界时 遮罩层不再往外移动
		} else if (moveX >= sMoveMax + sHalf) {
			fullShow.style.left = sMoveMax + sHalf;
			//当遮罩层到达div边界时 遮罩层不再往外移动
		} else {
			fullShow.style.left = moveX - sHalf + 'px';
			//将鼠标在盒子中的坐标赋值给遮罩层 减到sHalf使得鼠标在遮罩层x轴中心
		}

		if (moveY <= sHalf) {
			fullShow.style.top = 0;
			//当遮罩层到达div边界时 遮罩层不再往外移动
		} else if (moveY >= sMoveMax + sHalf) {
			fullShow.style.top = sMoveMax + sHalf;
			//当遮罩层到达div边界时 遮罩层不再往外移动
		} else {
			fullShow.style.top = moveY - sHalf + 'px';
			//将鼠标在盒子中的坐标赋值给遮罩层 减到sHalf使得鼠标在遮罩层y轴中心
		}
		bigImg.style.left = -bMoveX + 'px';
		bigImg.style.top = -bMoveY + 'px';
		//根据得来的大图片的移动距离赋值，由于大图片的移动效果与小图片是反方向的，所以取负值
	})
})