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

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

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

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

步骤如下：

1. HTML结构: 为每个<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/001/246/273/174312337946553.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="如何用CSS3和JavaScript实现图片点击后周围图片散开并放大效果？ "> <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/001/246/273/174312337917621.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="如何用CSS3和JavaScript实现图片点击后周围图片散开并放大效果？ "> <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/001/246/273/174312338030325.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="如何用CSS3和JavaScript实现图片点击后周围图片散开并放大效果？ "> <p><strong>2. JavaScript代码:</strong> <code>spread()函数接收被点击的图片元素作为参数，计算其他图片的位移和缩放比例：

function spread(img) {
  const images = document.getElementsByTagName('img');
  const index = Array.prototype.indexOf.call(images, img);
  for (let i = 0; i 
<p>这段代码中，<code>Math.sin</code>和<code>Math.cos</code>函数计算图片位移，<code>100</code>控制散开半径，<code>scale</code>控制缩放比例。被点击图片缩放比例为2，其他图片保持原样。</p>
<p><strong>3. CSS样式:</strong> 设置图片的初始位置、大小和过渡效果：</p>
<pre class="brush:php;toolbar:false">img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(1);
  transition: transform 0.5s ease-in-out;
  /* 添加其他样式，例如图片大小 */
  width: 100px;
  height: 100px;
}

position: absolute使图片绝对定位，translate(-50%, -50%)使图片居中，transition属性使图片变换过程平滑过渡。

通过以上步骤，即可实现点击图片后周围图片散开并自身放大的效果。 您可以调整代码中的参数（例如散开半径、缩放比例、过渡时间）来微调效果，并添加更多动画或交互细节以增强用户体验。 记得替换 "image1.jpg", "image2.jpg", "image3.jpg" 为您的实际图片路径。

以上是如何用CSS3和JavaScript实现图片点击后周围图片散开并放大效果？的详细内容。更多信息请关注PHP中文网其他相关文章！