如何用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實現圖片點擊後周圍圖片散開並放大效果？ "> 2. JavaScript代碼: 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中文網其他相關文章！