10.demo 放大镜 - 技术栈

需求

1.鼠标移至图片上方，鼠标周围出现黄色的的正方形框，黄色矩形框会随着鼠标的移动而移动；

2.将黄色正方形框里的内容的长和宽均放大2.4倍，并在图片右边进行显示。

演示图

思路解析

HTML 结构：
- 有一个容器 normal 包含了一张图片和一个小黄色块 small。
- 另外，还有一个放大镜效果的容器 large 包含了放大后的图片 largeImg。
CSS 样式：
- 设置基本样式，包括清除默认边距和列表样式，以及定义容器和各元素的样式。
JavaScript 脚本：
- 获取相关元素，包括 small、normal、large 和 largeImg。
- 记录 normal 元素的初始位置、宽度和高度。
- 设置鼠标移入和移出事件，显示或隐藏 small 和 large。
- 设置鼠标移动事件，根据鼠标位置计算 small 的位置，并相应地移动 largeImg 实现放大效果。
鼠标移动事件处理：
- 当鼠标移动到 normal 上时，计算鼠标相对于 normal 左上角的偏移量。
- 根据计算得到的偏移量，更新 small 的位置，使其跟随鼠标移动。
- 同时，计算 largeImg 的偏移量，以实现右侧放大区域的内容对应移动，产生放大效果。
- 限制 small 的移动范围，防止其移出 normal 区域。
- 在计算 largeImg 的偏移时，考虑到图片放大，偏移值需要按比例计算，从而达到正确的放大效果。

代码部分

ini 复制代码

<!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="./高木同学.jpg" width="100%" alt="">
		<div id="small"></div>
	</div>
	<div id="large">
		<img id="largeImg" src="./高木同学.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 

		// 设置鼠标移入事件
		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;
			// 设置图片的left和top的值
			largeImg.style.left = normalLeft+'px';
			largeImg.style.top = normalTop+'px';
		}

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