【前端技巧】图片预览及放大技巧，让你的网页更加生动！

12 min read

要实现图片预览和放大图片效果，可以使用以下步骤：

  1. 确定需要预览和放大的图片元素，可以是一个<img>标签或者一个背景图片。
  2. 当鼠标移到这个元素时，触发一个事件，可以是mouseover或者click事件。
  3. 在事件处理程序中，获取图片地址或背景图片地址，创建一个模态框或弹出框，将图片地址作为参数传入。
  4. 在弹出框中创建一个<img>标签，将图片地址作为源引用，实现预览效果。
  5. 在<img>标签的事件处理程序中，对鼠标移动事件进行监听，记录鼠标移动时的位置，根据位置计算出图片应该显示的位置。
  6. 使用CSS的transform属性对图片进行缩放以及移动操作，实现放大效果。

以下是一个简单的HTML和JavaScript代码实现图片预览和放大效果的示例：

HTML代码：

<div class="image-container">
  <img src="image.jpg" alt="Image">
</div>

JavaScript代码：

// 获取需要预览和放大的图片元素
const imageContainer = document.querySelector('.image-container');
const image = imageContainer.querySelector('img');

// 添加鼠标移动事件监听器
image.addEventListener('mouseover', function(event) {
  // 创建模态框或弹出框
  const modal = document.createElement('div');
  modal.classList.add('modal');
  document.body.appendChild(modal);

  // 创建<img>标签以实现预览效果
  const preview = document.createElement('img');
  preview.src = image.src;
  modal.appendChild(preview);

  // 添加鼠标移动事件监听器
  preview.addEventListener('mousemove', function(event) {
    // 获取鼠标位置
    const x = event.clientX;
    const y = event.clientY;

    // 计算图片位置
    const rect = preview.getBoundingClientRect();
    const offsetLeft = rect.left + window.pageXOffset;
    const offsetTop = rect.top + window.pageYOffset;
    const posX = (x - offsetLeft) / preview.clientWidth * 100;
    const posY = (y - offsetTop) / preview.clientHeight * 100;

    // 设置图片的缩放以及移动效果
    preview.style.transformOrigin = `${posX}% ${posY}%`;
    preview.style.transform = 'scale(2) translate(-50%, -50%)';
  });
});

// 添加鼠标离开事件监听器
image.addEventListener('mouseout', function(event) {
  // 删除模态框或弹出框
  const modal = document.querySelector('.modal');
  if (modal) {
    modal.parentNode.removeChild(modal);
  }
});

CSS代码：

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal img {
  max-width: 100%;
  max-height: 100%;
  position: relative;
  transition: transform 0.2s ease-in-out;
}