實現圖片點擊后周圍圖片散開并放大效果
許多開發者都希望實現這樣的交互效果：點擊一張圖片，周圍的圖片會以一定半徑散開，同時被點擊的圖片自身放大。本文將詳細講解如何結合css3和JavaScript來實現這個效果。
核心思路是利用css3的transform屬性控制圖片的位置和大小，并用JavaScript動態計算每個圖片的位移和縮放比例。
首先，我們需要為每個圖片元素添加點擊事件監聽器。假設你的html結構如下：
@@##@@</img> @@##@@</img> @@##@@</img>
然后，編寫JavaScript函數spread來處理點擊事件：
立即學習“Java免費學習筆記（深入）”；
function spread(img) { const images = document.querySelectorAll('img'); const index = Array.from(images).indexOf(img); const centerX = window.innerWidth / 2; const centerY = window.innerHeight / 2; const radius = 100; // 散開半徑 images.forEach((image, i) => { const angle = (i - index) * (Math.PI / 4); // 計算角度 const x = centerX + radius * Math.cos(angle); const y = centerY + radius * Math.sin(angle); const scale = i === index ? 2 : 1; // 被點擊圖片放大 image.style.transform = `translate(${x - image.offsetWidth / 2}px, ${y - image.offsetHeight / 2}px) scale(${scale})`; }); }
這段代碼首先獲取所有圖片元素，并找到被點擊圖片的索引。然后，它利用正弦和余弦函數計算每個圖片的x和y位移，從而實現環形散開的效果。scale變量控制縮放比例，被點擊的圖片縮放比例為2，其余圖片保持不變。最后，使用transform屬性設置每個圖片的位置和大小，并減去圖片自身寬高的一半，保證圖片以中心點為基準進行位移。
為了使動畫效果更平滑，建議在CSS中添加transition屬性：
img { position: absolute; transition: transform 0.5s ease-in-out; }
這段CSS代碼將圖片設置為絕對定位，并定義transform屬性的過渡效果，使動畫更自然流暢。
通過以上步驟，即可實現點擊圖片后周圍圖片散開并自身放大的效果。您可以調整代碼中的數值（例如radius）來改變散開半徑和縮放比例。需要注意的是，圖片的初始位置和布局會影響最終效果，需要根據實際情況進行調整。 為了更好的用戶體驗，可以考慮添加動畫結束后的重置狀態功能。
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
