隨著互聯網的飛速發展，圖片在我們的日常生活中已經不可避免。而且圖片比文字更能夠直觀地傳達信息。在某些情況下，我們甚至需要對圖片進行放大預覽。這時候，javascript 圖片放大預覽就成為了必不可少的功能之一。 那么，javascript 圖片放大預覽是什么呢？簡單來說，就是當我們鼠標移動到圖片上時，會彈出一個放大后的圖片窗口。這樣就能夠更加詳細地查看圖片的各個細節。下面，我們就來一起探討一下如何實現這一功能。 在編寫 javascript 圖片放大預覽代碼前，我們需要先準備好一張測試圖片。比如說：

<img src="test.jpg">

接下來，我們需要先制作出一個預覽圖。這張圖片通常會比原圖小，否則就沒有必要進行放大預覽了。我們可以使用 CSS 來定義這張預覽圖的樣式。比如說：

img.preview {
width: 200px;
height: auto;
cursor: pointer;
}

在上面的代碼中，我們設定了預覽圖的寬度為 200 像素，并指定使用手型光標。然后，我們需要給預覽圖添加一個事件監聽器，當用戶鼠標懸停在圖片上方時會被觸發。

const imgPreview = document.querySelector('img.preview');
imgPreview.addEventListener('mouseover', function() {
// 顯示放大的圖片
});

在鼠標懸停事件觸發時，我們需要繼續編寫代碼來顯示放大的圖片。在這里，我們可以使用一個層疊的 div 元素來容納該圖片，這個 div 元素應該包括該圖片的絕對定位和一個邊框。我們可以使用以下代碼來實現。

imgPreview.addEventListener('mouseover', function() {
const previewImage = document.createElement('img');
previewImage.setAttribute('src', 'test-large.jpg');
const previewBox = document.createElement('div');
previewBox.className = 'preview-box';
previewBox.appendChild(previewImage);
document.body.appendChild(previewBox);
});

在這個代碼片段中，我們首先創建了一個新的 img 元素，并將其鏈接到要放大的圖像上。然后，我們又創建了一個 div 元素，添加預覽圖像作為子元素。最后，我們將該 div 元素插入到 body 中，這樣就實現了預覽圖像的放大。 但是，這只是一個簡單的實現。當用戶將鼠標從縮略圖移開時，我們還需要將預覽圖像隱藏起來。我們可以通過監聽 mouseout 事件來實現。

imgPreview.addEventListener('mouseout', function() {
const previewBox = document.querySelector('.preview-box');
if (previewBox !== null) {
document.body.removeChild(previewBox);
}
});

在上面的代碼中，我們使用 querySelector 獲取了該 div 元素，并從 body 中移除該元素。這樣就實現了預覽圖像的隱藏。 綜上所述，javascript 圖片放大預覽是一項非常有用的功能。通過上述的代碼示例，你可以看出來實現它并不難，只要你掌握了一些 CSS 和 DOM 技巧，就可以輕松地創建出一個類似的效果。