Java script 图片放大镜

JavaScript图片放大镜通常是一个交互式的网页功能，它允许用户点击或悬停在一个图片上时，显示一个放大区域，使得图像可以更详细地查看。这种效果通常是通过CSS和JavaScript结合实现的：

1. HTML部分：创建一个基础的图片容器，并添加一个鼠标事件监听器，如`<img>`标签加上一个隐藏的`<div>`作为放大镜。

<img src="image.jpg" alt="图片" data-zoom-image="large-image.jpg">
<div class="zoom-container"></div>

2. CSS部分：设置初始样式和放大镜的样式，比如位置、大小和透明度。

.zoom-container {
  position: absolute;
  display: none;
  width: 200px; /* 可视化放大的宽度 */
  height: 200px;
  background-color: rgba(0, 0, 0, 0.5); /* 遮罩层背景色 */
}

3. JavaScript部分：当图片被点击或悬停时，显示或隐藏放大镜，并调整其内容和位置。

var img = document.querySelector('img');
var zoomContainer = document.querySelector('.zoom-container');

img.addEventListener('mousemove', function(e) {
  var rect = img.getBoundingClientRect();
  var mousePos = { x: e.clientX - rect.left, y: e.clientY - rect.top };
  zoomContainer.style.display = 'block';
  zoomContainer.style.left = mousePos.x + 'px'; // 根据鼠标位置移动
  zoomContainer.style.top = mousePos.y + 'px';
});

img.addEventListener('mouseleave', function() {
  zoomContainer.style.display = 'none';
});