Html+css+js realizes the magnifying glass function (detailed and complete code)

By pointing the mouse to the specified picture, when the mouse is moved to the picture, a small transparent area will be displayed, and then the part of the small area will be enlarged to view the details.

running result:

Detailed code:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.top {
				/* 缩略图	缩小3倍
				宽高之比:1.6
				缩略图是小放大镜的两倍 */
				width: 640px;
				height: 400px;
				border: 1px solid;
				position: relative;
			}

			.top img {
				width: 100%;
				height: 100%;
			}

			/* 小放大镜 */
			.mark {
				width: 320px;
				height: 200px;
				background-color: yellow;
				opacity: 0.5;
				position: absolute;
				left: 0;
				top: 0;
				display: none;
			}

			.bottom img {
				/* 原图 */
				width: 1920px;
				height: 1200px;
				position: absolute;
				left: 0;
				top: 0;
			}

			/* 大放大镜 */
			.bottom {
				width: 960px;
				height: 600px;
				border: 5px solid;
				position: relative;
				overflow: hidden;
				display: none;
			}
		</style>
	</head>
	<body>
		<div class="app">
			<div class="top">
				<!-- 缩略图 -->
				<img src="../imgs/xhr.jpg">
				<!-- 小放大镜 -->
				<div class="mark"></div>
			</div>
			<!-- 大放大镜 -->
			<div class="bottom">
				<img src="../imgs/xhr.jpg">
			</div>
		</div>
		<script type="text/javascript">
			/* 放大镜原理:
				原图宽高比例=缩略图宽高比例=放大镜宽高比例
				原图与大放大镜倍数比例=缩略图与小放大镜倍数比例
				小放大镜移动方式与原图移动方向相反,原图移动距离=-小放大镜移动距离*倍数 */
			//获取top节点
			var _top = document.querySelector(".top");
			// 获取小放大镜节点
			var _mark = document.querySelector(".mark");
			//获取原图节点
			var _rimg = document.querySelector(".bottom img");
			//获取bottom节点
			var _bottom = document.querySelector(".bottom");

			//鼠标悬停显示放大镜和原图
			_top.onmouseover = function() {
				_mark.style.display = "block";
				_bottom.style.display = "block";
			}
			// 鼠标离开时隐藏放大镜和原图
			_top.onmouseout = function() {
				_mark.style.display = "none";
				_bottom.style.display = "none";
			}

			// onmousemove:鼠标跟随事件
			_top.onmousemove = function(event) {

			//1.计算小放大镜的移动位置	//clientX	clientY：获取鼠标点距离浏览器的坐标
				//offsetLeft：距离左偏移量	clientWidth：可视宽
				var dx = event.clientX - _top.offsetLeft - _mark.clientWidth / 2;
				var dy = event.clientY - _top.offsetTop - _mark.clientHeight / 2;

				//到最左边
				if (dx <= 0) {
					dx = 0;
				}
				//到最右边
				if (dx >= _top.clientWidth - _mark.offsetWidth) {
					dx = _top.clientWidth - _mark.offsetWidth;
				}

				//小放大镜的左、上距离
				_mark.style.left = dx + "px";

				//到最上边
				if (dy <= 0) {
					dy = 0;
				}
				//到最下边
				if (dy >= _top.clientHeight - _mark.offsetHeight) {
					dy = _top.clientHeight - _mark.offsetHeight;
				}
				_mark.style.top = dy + "px";
				//2.根据小放大镜的移动位置改变原图位置		原图是缩略图的3倍
				_rimg.style.left = -3 * dx + "px";
				_rimg.style.top = -3 * dy + "px";
			}
		</script>
	</body>
</html>

Attach the material picture:

Welcome everyone to study and refer to. If you have any doubts, you can private message or leave a message!

Html+css+js realizes the magnifying glass function (detailed and complete code)

Guess you like