打造炫酷網(wǎng)頁交互：點擊圖片，周圍圖片散開并放大！

許多網(wǎng)站都采用這種引人注目的交互效果：點擊一張圖片，它會放大，同時周圍的圖片會向外散開。本文將詳細(xì)介紹如何使用CSS3和JavaScript實現(xiàn)這一效果。

首先，我們需要為每張圖片添加一個點擊事件監(jiān)聽器。當(dāng)用戶點擊圖片時，JavaScript代碼會執(zhí)行，調(diào)整所有圖片的位置和大小。關(guān)鍵在于利用CSS3的transform屬性實現(xiàn)圖片的位移和縮放。

步驟如下：

1. HTML結(jié)構(gòu): 為每個<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/001/246/273/174312337946553.jpg" class="lazy" alt="如何用CSS3和JavaScript實現(xiàn)圖片點擊后周圍圖片散開并放大效果？ "> <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/001/246/273/174312337917621.jpg" class="lazy" alt="如何用CSS3和JavaScript實現(xiàn)圖片點擊后周圍圖片散開并放大效果？ "> <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/001/246/273/174312338030325.jpg" class="lazy" alt="如何用CSS3和JavaScript實現(xiàn)圖片點擊后周圍圖片散開并放大效果？ "> <p><strong>2. JavaScript代碼:</strong> <code>spread()函數(shù)接收被點擊的圖片元素作為參數(shù)，計算其他圖片的位移和縮放比例：

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>函數(shù)計算圖片位移，<code>100</code>控制散開半徑，<code>scale</code>控制縮放比例。被點擊圖片縮放比例為2，其他圖片保持原樣。</p>
<p><strong>3. CSS樣式:</strong> 設(shè)置圖片的初始位置、大小和過渡效果：</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屬性使圖片變換過程平滑過渡。

通過以上步驟，即可實現(xiàn)點擊圖片后周圍圖片散開并自身放大的效果。 您可以調(diào)整代碼中的參數(shù)（例如散開半徑、縮放比例、過渡時間）來微調(diào)效果，并添加更多動畫或交互細(xì)節(jié)以增強(qiáng)用戶體驗。 記得替換 "image1.jpg", "image2.jpg", "image3.jpg" 為您的實際圖片路徑。

以上是如何用CSS3和JavaScript實現(xiàn)圖片點擊后周圍圖片散開并放大效果？的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！