放大镜1.16

最新推荐文章于 2024-07-08 16:22:29 发布

时不久留

最新推荐文章于 2024-07-08 16:22:29 发布

阅读量393

点赞数

分类专栏：小案例文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/weixin_73104281/article/details/128705143

版权

小案例专栏收录该内容

17 篇文章 0 订阅

订阅专栏

需求

1.鼠标移至图片上方，鼠标周围出现黄色的的正方形框，黄色矩形框会随着鼠标的移动而移动；
2.将黄色正方形框里的内容的长和宽均放大2.4倍，并在图片右边进行显示。

原理

小黄快和放大区域一开始为display：none，给原图绑定鼠标移入事件，让小黄快和放大区域显示。设置小黄快块的运动范围，上下左右分别设置，以及鼠标在小黄快的位置。设置右边large块的图片尺寸宽高分别为小黄快的2.4倍。

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		*{
			margin:0px;  
			padding:0px;
		}
		li{
			list-style:none;
		}
		#normal{
			width:400px;
			height:400px;
			position:relative;
			border:1px solid #ccc;
		}

		#small{
			width:100px;
			height:100px;
			background:yellow;
			opacity:0.4;
			position:absolute;
			top:0px;
			left:0px;
			display:none;
		}
		#large{
			width:240px;
			height:240px;
			position:absolute;
			top:70px;
			left:521px;
			overflow:hidden;
			display:none;
			border:1px solid #ccc;
		}

		#large img{
			position:absolute;
			left:-500px;
		}

	</style>
</head>
<body>
	<div id="normal">
		<img src="./QQ图片20230116153507.jpg" width="100%" alt="">
		<div id="small"></div>
	</div>
	<div id="large">
		<img id="largeImg" src="./QQ图片20230116153507.jpg" alt="">
	</div>

	<script>
		// 获取元素
		var small = document.getElementById('small');	
        // 小黄块
		var normal = document.getElementById('normal');		
		var large = document.getElementById('large');		
		var largeImg = document.getElementById('largeImg');	
		// 获取normal元素的left和top值
		var normLeft = normal.offsetLeft;
		var normTop = normal.offsetTop;
		// 获取normal元素的宽度和高度
		var normWidth = normal.offsetWidth;
		var normHeight = normal.offsetHeight;
		// 右侧图片的宽度与高度
		var largeWidth 
		var largeHeight 
		// 小球的宽度与高度
		var smallWidth 
		var smallHeight 

		// document.write(normLeft);
		// document.write("<br>");
		// document.write(normTop);
		// document.write("<br>");
		// document.write(normHeight);
		// document.write("<br>");
		// document.write(normWidth);

		// 设置鼠标移入事件
		normal.onmouseover = function(){
			small.style.display = 'block';
			large.style.display = 'block';
			// 获取small元素的宽度/高度
			smallWidth = small.offsetWidth;
			smallHeight = small.offsetHeight;

			// 获取右侧图片的大小
			largeWidth = largeImg.offsetWidth;
			largeHeight = largeImg.offsetHeight;
		}
		// 设置鼠标移出事件
		normal.onmouseout = function(){
			small.style.display = 'none';
			large.style.display = 'none';
		}

		// 设置small的移动
		normal.onmousemove = function(e){
			// 获取的是鼠标距离当前可视区域顶部的距离
			var y = e.clientY;
			// document.write(y);

			// 获取鼠标距离文档顶部和文档左侧的距离
			var x = e.pageX;
			var y = e.pageY;
			// document.write(y);

			// 计算small元素最终的left和top的值
			// left = 鼠标点的x位置 - normal的left值 - small的宽度/2
			var l = x - normLeft - smallWidth/2;
			// top = 鼠标点的y坐标 - normal的top的值 - small元素的高度/2
			var t = y - normTop - smallHeight/2;

			// 判断small元素的位置
			// 水平方向的临界
            //normal的宽度 - small的宽度
			var horizon = normWidth - smallWidth;	
			if(l>=horizon){
				l = horizon;
			}
			// 左侧的临界点
			if(l<=0){
				l = 0;
			}
			// 顶部的临界点
			if(t<=0){
				t = 0;
			}
			// 底部的临界点
			var bottom = normHeight - smallHeight - 2;	// 2 两个元素的边框
			if(t>=bottom){
				t = bottom;
			}

			// 设置left和top的值
			small.style.left = l+'px';
			small.style.top = t+'px';

			// 右侧的大图的设置 -- 计算大图的偏移值
			// normalL / 1000 = l/400
			 normalLeft = -largeWidth/normWidth*l;
			 normalTop = -largeHeight/normHeight*t;
			// largeWidth = largeImg.offsetWidth;
			// largeHeight = largeImg.offsetHeight;

			// 设置图片的left和top的值
			largeImg.style.left = normalLeft+'px';
			largeImg.style.top = normalTop+'px';
		}

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