HTML點擊查看大圖代碼 在網(wǎng)頁開發(fā)中，我們經(jīng)常要實現(xiàn)在頁面中展示一組圖片，并且讓用戶能夠點擊圖片查看其放大后的大圖效果。下面來介紹一種實現(xiàn)方式，即在HTML中使用點擊事件來實現(xiàn)查看大圖的功能。 首先，在HTML中需要展示的圖片上添加一個class，如"picture"：

接下來，在頁面中添加一個空的元素，用于展示大圖：

然后，使用JavaScript為第一步中添加的class添加一個點擊事件，當(dāng)用戶點擊小圖時，會將點擊的圖片的src屬性值賦值給第二步中的空元素的src屬性：

document.querySelectorAll('.picture').forEach(function (el) {
el.addEventListener('click', function (e) {
var src = e.target.getAttribute('src');
document.querySelector('.large-picture').setAttribute('src', src.replace('small_', 'large_'));
});
});

以上代碼通過querySelectorAll來獲取所有class為"picture"的元素，然后通過addEventListener將點擊事件添加到每個元素上。當(dāng)元素被點擊時，會獲取其src屬性的值，并將其替換為大圖的路徑，然后設(shè)置到class為"large-picture"的元素上。 最后，在CSS中為第二步中的空元素添加樣式，如以下代碼： .large-picture { display: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 90%; max-height: 90%; z-index: 999; } 以上代碼通過設(shè)置position: absolute;讓元素定位到頁面上，并通過left、top、transform來使其居中。同時，設(shè)置了一個max-width和max-height來限制圖片的最大展示范圍。 綜上所述，通過在HTML中使用點擊事件來實現(xiàn)查看大圖的功能是一種比較簡單易用的方式。如有需要，可以根據(jù)實際情況來對以上代碼進(jìn)行更改和優(yōu)化。