js 图片缩放特效代码

下面是详细讲解“js 图片缩放特效代码”的完整攻略：

什么是图片缩放特效

图片缩放特效指的是使用 JavaScript 对图片进行放大、缩小、旋转、移动等视觉特效处理，以增强用户对页面的交互感和体验。常见的应用场景有图片轮播、幻灯片展示、相册浏览等。

如何实现图片缩放特效

实现图片缩放特效需要使用 JavaScript 和 CSS，具体实现过程如下：

1. 定义 HTML 结构

首先在 HTML 页面中的任意位置插入一个包含图片的 div 容器，如下所示：

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

1. 添加 CSS 样式

为图片容器和图片添加 CSS 样式，包括宽、高、位置、边框、背景等，如下所示：

.img-container {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 0 auto;
  border: 1px solid #ccc;
}

.img-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 图片保持比例并填满容器 */
}

1. 编写 JavaScript 代码

编写 JavaScript 代码实现对图片的缩放特效，其中需要监听鼠标事件和计算图片的缩放比例等，具体代码如下：

// 获取图片容器和图片对象
const imgContainer = document.querySelector('.img-container');
const img = imgContainer.querySelector('img');

// 定义缩放比例和最大缩放倍数
const scaleRatio = 0.1; // 缩放比例（10%）
const maxScale = 2; // 最大缩放倍数

// 监听鼠标滚轮事件
imgContainer.addEventListener('wheel', (event) => {
  // 取消默认行为（禁止页面滚动）
  event.preventDefault();

  // 获取当前缩放倍数
  const currentScale = getScale(img);

  // 计算缩放倍数的变化量
  const delta = event.deltaY > 0 ? -1 : 1;

  // 计算缩放后的大小
  const newScale = currentScale + delta * scaleRatio;
  const newWidth = img.naturalWidth * newScale;
  const newHeight = img.naturalHeight * newScale;

  // 根据缩放后的大小调整图片位置
  const xOffset = (newWidth - imgContainer.offsetWidth) / 2;
  const yOffset = (newHeight - imgContainer.offsetHeight) / 2;
  const left = Math.min(0, Math.max(-xOffset, -delta * scaleRatio * imgContainer.offsetWidth / 2));
  const top = Math.min(0, Math.max(-yOffset, -delta * scaleRatio * imgContainer.offsetHeight / 2));

  // 判断是否超过最大缩放倍数
  if (newScale <= 1 || newScale > maxScale) {
    return;
  }

  // 缩放图片
  img.style.width = newWidth + 'px';
  img.style.height = newHeight + 'px';
  img.style.left = left + 'px';
  img.style.top = top + 'px';
});

// 计算当前缩放倍数
function getScale(img) {
  const width = parseInt(img.style.width);
  const height = parseInt(img.style.height);
  const scaleX = width / img.naturalWidth;
  const scaleY = height / img.naturalHeight;
  return Math.min(scaleX, scaleY);
}

1. 运行代码

将以上代码复制粘贴到 HTML 页面的 script 标签或外部 JS 文件中，并在浏览器中打开该页面，即可看到图片的缩放特效。

示例说明

下面是两条示例说明：

示例一

实现一个图片放大镜特效，当鼠标悬停在图片上时，图片被放大并在放大区域内显示，移动鼠标时显示放大区域内的不同部分，代码如下：

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

.img-container {
  position: relative;
  width: 400px;
  height: 400px;
  margin: 0 auto;
  border: 1px solid #ccc;
}

.zoom-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  border: 1px solid #000;
  visibility: hidden;
  pointer-events: none;
}

.img-container:hover .zoom-container {
  visibility: visible;
}

.img-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

// 获取图片和放大区域
const imgContainer = document.querySelector('.img-container');
const img = imgContainer.querySelector('img');
const zoomContainer = imgContainer.querySelector('.zoom-container');

// 监听鼠标移动事件
imgContainer.addEventListener('mousemove', (event) => {
  // 计算鼠标在图片中的位置
  const rect = img.getBoundingClientRect();
  const x = event.clientX - rect.left;
  const y = event.clientY - rect.top;

  // 计算放大区域的偏移量
  const zoomX = x / img.width * zoomContainer.offsetWidth - zoomContainer.offsetWidth / 2;
  const zoomY = y / img.height * zoomContainer.offsetHeight - zoomContainer.offsetHeight / 2;

  // 显示放大区域
  zoomContainer.style.backgroundImage = `url(${img.src})`;
  zoomContainer.style.backgroundSize = `${img.width * 100 / zoomContainer.offsetWidth}% ${img.height * 100 / zoomContainer.offsetHeight}%`;
  zoomContainer.style.backgroundPosition = `-${zoomX}px -${zoomY}px`;
});

示例二

实现一个图片卡片翻转特效，当鼠标点击图片后，图片以翻转方式展开并显示介绍信息，再次点击时图片翻转回原来的状态，代码如下：

<div class="img-card">
  <div class="img-front">
    <img src="image.jpg" alt="image">
  </div>
  <div class="img-back">
    <h3>图片标题</h3>
    <p>图片介绍信息</p>
  </div>
</div>

.img-card {
  position: relative;
  width: 300px;
  height: 200px;
  margin: 0 auto;
  border: 1px solid #ccc;
  perspective: 1000px;
  transform-style: preserve-3d;
  cursor: pointer;
}

.img-front, .img-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden; /* 防止翻转时出现白色背景 */
}

.img-back {
  transform: rotateY(180deg);
}

.img-card.open .img-front {
  transform: rotateY(-180deg);
}

.img-card.open .img-back {
  transform: rotateY(0deg);
}

// 获取图片卡片
const imgCard = document.querySelector('.img-card');

// 监听点击事件
imgCard.addEventListener('click', (event) => {
  // 切换状态类
  imgCard.classList.toggle('open');
});

以上两条示例说明可以帮助你更好地理解和应用图片缩放特效技术。