打造炫酷網頁交互：點擊圖片，周圍圖片散開并放大！
許多網站都采用這種引人注目的交互效果：點擊一張圖片，它會放大，同時周圍的圖片會向外散開。本文將詳細介紹如何使用css3和JavaScript實現這一效果。
首先，我們需要為每張圖片添加一個點擊事件監聽器。當用戶點擊圖片時，JavaScript代碼會執行，調整所有圖片的位置和大小。關鍵在于利用css3的transform屬性實現圖片的位移和縮放。
步驟如下：
1. html結構: 為每個
2. JavaScript代碼: spread()函數接收被點擊的圖片元素作為參數，計算其他圖片的位移和縮放比例：
立即學習“Java免費學習筆記（深入）”；
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樣式: 設置圖片的初始位置、大小和過渡效果：
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” 為您的實際圖片路徑。
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
