要實現圖片放大功能，可以使用JavaScript和CSS來完成。以下是一種常見的實現方法：
1. 首先，為你想要實現放大效果的圖片添加一個事件監聽器，例如`click`事件。
const img = document.querySelector('img');img.addEventListener('click', enlargeImage);
2. 在事件處理程序中創建一個新的div元素，用于顯示放大的圖片。設置該div的樣式屬性，并將其插入到DOM中。
function enlargeImage(event) { const clickedImage = event.target; // 獲取被點擊的圖片元素
// 創建一個新的div元素，并設置樣式屬性
const enlargedDiv = document.createElement('div');
enlargedDiv.className = 'enlarged-image';
enlargedDiv.style.backgroundImage = `url(${clickedImage.src})`;
// 將放大的圖片插入到DOM中
document.body.appendChild(enlargedDiv);
}
3. 使用CSS來定義放大圖片的樣式。通過設置position、top、left、width和height等屬性，將放大的圖片覆蓋在原圖上方。
.enlarged-image { position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
z-index: 9999;
}
4. 最后，為放大的圖片添加一個事件監聽器，例如`click`事件，以便在用戶點擊放大的圖片時關閉它。
enlargedDiv.addEventListener('click', function() { this.remove(); // 移除放大的圖片元素
});
通過以上步驟，你可以實現一個簡單的圖片放大功能。當用戶點擊圖片時，會在頁面上以全屏的形式顯示放大的圖片，用戶再次點擊放大的圖片即可關閉它。你可以根據自己的需求調整樣式和交互細節。
