Bagaimana untuk melaksanakan kesan kaca pembesar imej dengan JavaScript?

.image-container { position: relative; } .zoom-container { position: absolute; top: 0; left: 100%; width: 200px; /* 放大镜的宽度 */ height: 200px; /* 放大镜的高度 */ background-color: #fff; /* 放大镜的背景色 */ border: 1px solid #000; /* 放大镜的边框 */ opacity: 0; /* 初始状态隐藏放大镜 */ pointer-events: none; /* 放大镜不接收鼠标事件 */ } .image-container:hover .zoom-container { opacity: 1; /* 鼠标悬停时显示放大镜 */ }

// 获取相关元素 var imageContainer = document.querySelector('.image-container'); var zoomContainer = document.querySelector('.zoom-container'); var img = imageContainer.querySelector('img'); // 计算放大镜容器的宽度和高度 var zoomContainerWidth = zoomContainer.offsetWidth; var zoomContainerHeight = zoomContainer.offsetHeight; // 设置放大镜容器的背景图片为原始图片 zoomContainer.style.backgroundImage = 'url(' + img.src + ')'; // 根据鼠标位置计算放大镜的位置和背景定位 imageContainer.addEventListener('mousemove', function(event) { // 获取鼠标在原始图片内的位置 var mouseX = event.pageX - this.offsetLeft; var mouseY = event.pageY - this.offsetTop; // 计算放大镜的位置 var zoomX = mouseX - zoomContainerWidth / 2; var zoomY = mouseY - zoomContainerHeight / 2; // 限制放大镜的位置不超出原始图片范围 if (zoomX < 0) { zoomX = 0; } else if (zoomX > img.offsetWidth - zoomContainerWidth) { zoomX = img.offsetWidth - zoomContainerWidth; } if (zoomY < 0) { zoomY = 0; } else if (zoomY > img.offsetHeight - zoomContainerHeight) { zoomY = img.offsetHeight - zoomContainerHeight; } // 设置放大镜的位置和背景定位 zoomContainer.style.left = zoomX + 'px'; zoomContainer.style.top = zoomY + 'px'; zoomContainer.style.backgroundPosition = -zoomX + 'px ' + -zoomY + 'px'; }); // 鼠标离开时隐藏放大镜 imageContainer.addEventListener('mouseleave', function() { zoomContainer.style.opacity = 0; });