如何用CSS3和JavaScript实现图片点击后周围图片散开并放大效果？（图片.散开.如何用.放大.效果.....）

wufei123 2025-04-06 阅读:18 评论:0

打造炫酷网页交互：点击图片，周围图片散开并放大！许多网站都采用这种引人注目的交互效果：点击一张图片，它会放大，同时周围的图片会向外散开。本文将详细介绍如何使用CSS3和JavaScript实现这一效果。首先，我们需要为每张图片添加一个...

如何用CSS3和JavaScript实现图片点击后周围图片散开并放大效果？

打造炫酷网页交互：点击图片，周围图片散开并放大！

许多网站都采用这种引人注目的交互效果：点击一张图片，它会放大，同时周围的图片会向外散开。本文将详细介绍如何使用CSS3和JavaScript实现这一效果。

首先，我们需要为每张图片添加一个点击事件监听器。当用户点击图片时，JavaScript代码会执行，调整所有图片的位置和大小。关键在于利用CSS3的transform属性实现图片的位移和缩放。

步骤如下：

1. HTML结构: 为每个如何用CSS3和JavaScript实现图片点击后周围图片散开并放大效果？

2. JavaScript代码: spread()函数接收被点击的图片元素作为参数，计算其他图片的位移和缩放比例：

PHP

function spread(img) {
  const images = document.getElementsByTagName('img');
  const index = Array.prototype.indexOf.call(images, img);
  for (let i = 0; i < images.length; i++) {
    const distance = Math.sqrt(Math.pow(i - index, 2)); // 计算距离
    const angle = (i - index) * Math.PI / 4; // 计算角度
    const x = 100 * Math.cos(angle); // 计算x位移
    const y = 100 * Math.sin(angle); // 计算y位移
    const scale = i === index ? 2 : 1; // 被点击图片放大，其他图片不变

    images[i].style.transform = `translate(${x}px, ${y}px) scale(${scale})`;
  }
}

这段代码中，Math.sin和Math.cos函数计算图片位移，100控制散开半径，scale控制缩放比例。被点击图片缩放比例为2，其他图片保持原样。

3. CSS样式: 设置图片的初始位置、大小和过渡效果：

PHP

img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(1);
  transition: transform 0.5s ease-in-out;
  /* 添加其他样式，例如图片大小 */
  width: 100px;
  height: 100px;
}