HTML 點(diǎn)擊縮略圖放大代碼，實(shí)現(xiàn)了一個實(shí)用的功能，可以讓用戶一鍵放大圖片快速查看細(xì)節(jié)，提高用戶體驗(yàn)。下面我們來介紹這個功能的實(shí)現(xiàn)方法。 首先，我們需要在 HTML 代碼中插入事件監(jiān)聽器，以響應(yīng)用戶的點(diǎn)擊事件。代碼如下所示：

function enlarge(imgsrc) {
var mask = document.createElement("div");
mask.setAttribute("id", "mask");
var img = document.createElement("img");
img.setAttribute("src", imgsrc);
mask.appendChild(img);
document.body.appendChild(mask);
mask.onclick = function () {
document.body.removeChild(mask);
}
}

代碼中，我們定義了一個函數(shù) enlarge()，這個函數(shù)的參數(shù) imgsrc 表示要放大的圖片地址。函數(shù)首先創(chuàng)建一個 div 元素，并設(shè)置其 id 為 "mask"，用來充當(dāng)圖片的遮罩層。然后，函數(shù)創(chuàng)建一個 img 元素，并設(shè)置其 src 屬性為 imgsrc。最后，將這個 img 對象添加到創(chuàng)建的 mask div 元素中，并將 mask 添加到頁面中。 為了實(shí)現(xiàn)點(diǎn)擊遮罩層后關(guān)閉放大的圖片的功能，我們給 mask 元素注冊 onclick 事件，點(diǎn)擊 mask 時將其從頁面中移除。 HTML 部分的代碼如下所示：

<img src="thumbnail.jpg" onclick="enlarge('large.jpg')" />

代碼中，我們將要放大的圖片的地址 large.jpg 作為參數(shù)傳遞給 enlarge() 函數(shù)。 至此，我們已經(jīng)完成了 HTML 點(diǎn)擊縮略圖放大功能的實(shí)現(xiàn)。使用上述代碼，我們可以方便地實(shí)現(xiàn)一個簡單、易用的圖片放大功能，提升網(wǎng)頁的用戶體驗(yàn)。