js第九题

题九：放大镜效果

要求：

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

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

html

   <div class="container"><div class="image-container"><img id="originalImg" src="https://img14.360buyimg.com/n1/jfs/t1/256917/15/11473/120071/67833d0cF89363a16/bb4cd73787dbfe2f.jpg.avif" alt="示例图片"><div class="zoom-box"></div></div><div class="zoom-area"></div></div>

css

  body {margin: 0;font-family: Arial, sans-serif;background-color: #fff;display: flex;justify-content: center;align-items: center;height: 100vh;}.container {position: relative;width: 800px;display: flex;gap: 20px;}.image-container {position: relative;display: inline-block;border: 2px solid #ddd;border-radius: 10px;overflow: hidden;}#originalImg {width: 400px;height: 300px;object-fit: cover;display: block;}.zoom-box {position: absolute;width: 100px;height: 100px;border: 2px solid #ffd700;background: rgba(255, 215, 0, 0.1);pointer-events: none;display: none;border-radius: 5px;}.zoom-area {position: relative;width: 400px;height: 300px;border: 2px solid #ddd;border-radius: 10px;overflow: hidden;background-repeat: no-repeat;background-color: #fff;display: none;transition: opacity 0.3s ease;}

js

 const originalImg = document.getElementById('originalImg');const zoomBox = document.querySelector('.zoom-box');const zoomArea = document.querySelector('.zoom-area');const imgContainer = document.querySelector('.image-container');const scale = 2.4; // 放大倍数// 初始化放大区域zoomArea.style.backgroundImage = `url(${originalImg.src})`;zoomArea.style.backgroundSize = `${originalImg.width * scale}px ${originalImg.height * scale}px`;imgContainer.addEventListener('mousemove', (e) => {// 计算选框位置const containerRect = imgContainer.getBoundingClientRect();const x = e.clientX - containerRect.left;const y = e.clientY - containerRect.top;// 限制选框在图片范围内const boxX = Math.max(0, Math.min(x - 50, originalImg.width - 100));const boxY = Math.max(0, Math.min(y - 50, originalImg.height - 100));// 更新选框位置zoomBox.style.left = `${boxX}px`;zoomBox.style.top = `${boxY}px`;// 计算放大区域背景位置const bgX = -boxX * scale;const bgY = -boxY * scale;zoomArea.style.backgroundPosition = `${bgX}px ${bgY}px`;});// 显示/隐藏控件imgContainer.addEventListener('mouseenter', () => {zoomBox.style.display = 'block';zoomArea.style.display = 'block';zoomArea.style.opacity = '1';});imgContainer.addEventListener('mouseleave', () => {zoomBox.style.display = 'none';zoomArea.style.opacity = '0';setTimeout(() => {zoomArea.style.display = 'none';}, 300); // 等待过渡动画完成});

视频

9