JavaScript縮略圖是現代網站不可或缺的一部分。通過使用JavaScript編寫代碼，可以將完整的圖像轉換為較小的圖像，并在頁面上顯示它們，以便用戶可以更快地加載。
下面是JavaScript縮略圖的示例：
<!DOCTYPE html>
<html>
<head>
<title>縮略圖示例</title>
<style>
.thumbnail {
border: 1px solid #ddd;
padding: 10px;
margin: 10px;
}
.thumbnail img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class="thumbnail">
<img src="img/full-image-1.jpg" alt="Full image 1">
</div>
<div class="thumbnail">
<img src="img/full-image-2.jpg" alt="Full image 2">
</div>
<div class="thumbnail">
<img src="img/full-image-3.jpg" alt="Full image 3">
</div>
<script type="text/javascript">
var thumbnails = document.querySelectorAll('.thumbnail');
for (var i = 0; i < thumbnails.length; i++) {
var thumbnail = thumbnails[i].querySelector('img');
var fullImageSrc = thumbnail.src;
thumbnail.src = thumbnail.src.replace('.jpg', '_thumb.jpg');
thumbnail.setAttribute('data-full-image-src', fullImageSrc);
thumbnail.addEventListener('click', function() {
var fullImageSrc = this.getAttribute('data-full-image-src');
var fullImage = document.createElement('img');
fullImage.src = fullImageSrc;
fullImage.addEventListener('load', function() {
var width = fullImage.width;
var height = fullImage.height;
var maxWidth = 800;
var maxHeight = 600;
if (width > maxWidth) {
height = height * maxWidth / width;
width = maxWidth;
}
if (height > maxHeight) {
width = width * maxHeight / height;
height = maxHeight;
}
var modal = document.createElement('div');
modal.style.position = 'fixed';
modal.style.zIndex = '9999';
modal.style.top = '0';
modal.style.left = '0';
modal.style.width = '100%';
modal.style.height = '100%';
modal.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
modal.style.display = 'flex';
modal.style.justifyContent = 'center';
modal.style.alignItems = 'center';
var modalImage = document.createElement('img');
modalImage.src = fullImageSrc;
modalImage.style.maxWidth = width + 'px';
modalImage.style.maxHeight = height + 'px';
modal.appendChild(modalImage);
modal.addEventListener('click', function() {
document.body.removeChild(modal);
});
document.body.appendChild(modal);
});
});
}
</script>
</body>
</html>以上代碼展示了如何使用JavaScript創建縮略圖。JavaScript在頁面加載時對縮略圖進行處理，將原始圖像替換為縮略圖。
當用戶點擊縮略圖時，JavaScript會將原始圖像加載到頁面上。如果原始圖像太大，則JavaScript會自動將其縮小到適當的大小。
此示例使用JavaScript的事件處理程序，當用戶單擊圖像時，將創建一個模態框，其中包含原始圖像。用戶可以關閉模態框來返回縮略圖視圖。
JavaScript縮略圖不僅使頁面加載更快，而且還可以提高頁面的用戶友好性。用戶可以更快地獲取所需信息，并有機會查看更多細節。