js如何实现放大镜功能无外链（推荐）

最新推荐文章于 2024-10-18 18:45:21 发布

方寸而已

最新推荐文章于 2024-10-18 18:45:21 发布

阅读量91

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/lch01122/article/details/126588782

版权

QQ录屏20220822192205

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.little {
				width: 352px;
				height: 352px;
				border: 1px solid black;
				position: relative;
			}

			.little img {
				width: 352px;
				height: 352px;
			}

			.little .mark {
				width: 140px;
				height: 140px;
				background-color: yellow;
				opacity: 0.5;
				position: absolute;
				left: 0;
				top: 0;
				display: none;
			}

			.great {
				width: 352px;
				height: 352px;
				border: 1px solid black;
				overflow: hidden;
				position: relative;
				display: none;
				margin-left: 320px;
				margin-top: -200px;
			}

			.great img {
				position: absolute;
				left: 0;
				top: 0;
			}
		</style>
	</head>
	<body>
		<div class="wrapper">
			<div class="little">
				<img src="../img/手绘父亲A款.jpg" alt="">
				<div class="mark"></div>
			</div>
			<div class="great">
				<img src="../img/手绘父亲A款.jpg" alt="">
			</div>

		</div>
		<script>
			var _litte = document.querySelector(".little"); //小图框
			var _mark = document.querySelector(".mark"); //小放大镜
			var _great = document.querySelector(".great"); //大放大镜
			var _img = document.querySelector(".great img"); //大图

			//隐藏大小放大镜
			_litte.onmouseover = function() {
				_great.style.display = "block";
				_mark.style.display = "block";
			}
			//显示大小放大镜
			_litte.onmouseout = function() {
				_great.style.display = "none";
				_mark.style.display = "none";
			}
			
			_litte.onmousemove = function(event){
				//随鼠标小放大镜移动
				var dx = event.pageX - _litte.offsetLeft - _mark.offsetWidth / 2;
				var dy = event.pageY - _litte.offsetTop - _mark.offsetHeight / 2;
				//左
				if (dx <= 0) {
					dx = 0;
				}
				// 右
				if (dx >= _litte.offsetWidth - _mark.offsetWidth) {
					dx = _litte.offsetWidth - _mark.offsetWidth;
				}
				_mark.style.left = dx + "px";
				//上
				if (dy <= 0) {
					dy = 0;
				}
				//下
				if (dy >= _litte.offsetHeight - _mark.offsetHeight) {
					dy = _litte.offsetHeight - _mark.offsetHeight;
				}
				_mark.style.top = dy + "px";

				_img.style.left = -2.5 * dx + "px";
				_img.style.top = -2.5 * dy + "px";
			}

		</script>
	</body>
</html>