js 放大镜的实现

最新推荐文章于 2023-11-21 18:38:33 发布

huas_mcfeng

最新推荐文章于 2023-11-21 18:38:33 发布

阅读量622

点赞数 1

分类专栏： Js 文章标签： js 放大镜

本文链接：https://blog.csdn.net/qq_41592652/article/details/84501397

版权

Js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

效果图如下()：
在这里插入图片描述

坐标获取方式（js）

事件名	规则	兼容性
clientX/Y	相对浏览器可视区域左上角距离，不随页面滚动而改变	所有浏览器均支持
pageX/Y	相对文档区域左上角距离，会随着页面滚动而改变	除IE6/7/8不支持外，其余浏览器均支持
offsetX/Y	不过左上角基准点在不同浏览器中有区别，其中在IE中以内容区左上角为基准点不包括边框，如果触发点在边框上会返回负值，而chrome中以边框左上角为基准点	IE所有版本，chrome，Safari均完美支持，Firefox不支持
layerX/Y	firefox对于offset的代替，但是有个条件就是,需设置position为relative或者absolute,否则会返回相对html文档区域左上角的距离。	IE6/7/8不支持，opera不支持，IE9/10和Chrome、Safari均支持
screenX/Y	相对显示器屏幕左上角的距离，不随页面滚动而改变	所有浏览器均支持

html+js如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>bb</title>
		<link rel="stylesheet" type="text/css" href="../css/fangdajing.css"/>
	</head>
	<body>
		<div class="zoom" id="zoom">
			<div class="small" id="small">
				<div class="float1" id="float"></div>
				<img src="../img/小人(小).jpg" alt="小人物" title="小人物" class="smallimg" width="300px" height="450px" id="smallimg">
			</div>
			<div class="big" id="big">
				<img src="../img/小人(大).jpg" alt="大人物" width="900px" height="1350px" id="bigimg" class="bigimg">
			</div>
		</div>
	</body>
	<script type="text/javascript" charset="utf-8">
		var smallimg = document.getElementById("smallimg");
		var small = document.getElementById("small");
		var zoom = document.getElementById("zoom");
		var bigimg = document.getElementById("bigimg");
		var float1 = document.getElementById("float");
		var big = document.getElementById("big");
		var imgx = smallimg.offsetWidth;// 	返回元素的宽度，包括边框和填充，但不是边距
		var imgy = smallimg.offsetHeight;//返回任何一个元素的高度包括边框和填充，但不是边距
		var imgleft = smallimg.offsetLeft;//返回当前元素的相对水平偏移位置的偏移
		var imgtop = smallimg.offsetTop;//返回当前元素的相对垂直偏移位置的偏移
		var floatx = float1.offsetWidth;
		var floaty = float1.offsetHeight;
		small.onmousemove = function(e) {
			let fx = e.pageX;//获取坐标的x值
			let fy = e.pageY;//获取坐标的y值
			let minx = imgleft + floatx / 2;//透明层最小的x值
			let maxx = imgleft + imgx - floatx / 2;//透明层最大的x值
			let miny = imgtop + floaty / 2;//透明层最小的y值
			let maxy = imgtop + imgy - floaty / 2;//透明层最大的y值
			fx = judgex(fx, minx, maxx);//获取x值
			fy = judgey(fy, miny, maxy);//获取y值
			setParameter(fx, fy, 3);//设置值
		}
		small.onmouseover = function() {//显示
			float1.style.display = "block";
			float1.style.cursor = 'move';
			big.style.display = "block";

		}
		small.onmouseout = function() {//消失
			float1.style.display = "none";
			big.style.display = "none";
		}

		function setParameter(a, b, c) {//设置相应偏移量
			float1.style.left = a + "px";
			float1.style.top = b + "px";
			bigimg.style.left = -c * a + "px";
			bigimg.style.top = -c * b + "px";
		}

		function judgex(via, min, max) {//判断坐标x值属于哪个范围,并返回相应的值
			let temp = 0;
			if ((via - min) <= 0) {
				temp = imgleft;
			} else if ((via - max) >= 0) {
				temp = imgx - floatx + imgleft;
			} else {
				temp = via - floatx / 2;
			}
			return temp;
		}

		function judgey(via, min, max) {//判断坐标y值属于哪个范围,并返回相应的值
			let temp = 0;
			if ((via - min) <= 0) {
				temp = imgtop;
			} else if (via - max >= 0) {
				temp = imgy - floaty + imgtop;
			} else {
				temp = via - floaty / 2;
			}
			return temp;
		}
	</script>
</html>

css 部分：

.zoom {
	display: flex; //定位flex
}

.small {
	margin-right: 6.25rem;
	z-index: 3;
	position: relative;
}

.float1 {
	width: 6.25rem;
	height: 6.25rem;
	background-color: #F5F5D5;
	opacity: 0.6;
	position: absolute;
	z-index: 99;
}

.smallimg {
	display: block;
	z-index: 5;
}

.big {
	overflow: hidden;
	width: 18.75rem;
	height: 18.75rem;
	position: relative;
}

.bigimg {
	position: relative;
}