JavaScript实现缩略图到全宽图像页的平滑过渡

要实现缩略图到全宽图像页的平滑过渡效果，您可以使用JavaScript和CSS过渡效果来实现。下面是一个简单的示例：

HTML:

<div class="thumbnail" onclick="expandImage(this)">
   <img src="thumbnail_image.jpg" alt="Thumbnail Image">
</div>

<div id="expandedImage" style="display: none;">
   <img src="full_width_image.jpg" alt="Full Width Image">
</div>

CSS:

.thumbnail {
   width: 200px; /* 缩略图宽度 */
   height: 200px; /* 缩略图高度 */
   overflow: hidden;
   transition: all 0.5s; /* 过渡效果，可根据需要调整时间 */
}

.thumbnail img {
   width: 100%;
   height: auto;
}

#expandedImage {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: rgba(0, 0, 0, 0.8); /* 全宽图像页的背景颜色 */
   display: flex;
   align-items: center;
   justify-content: center;
   transition: opacity 0.5s; /* 过渡效果，可根据需要调整时间 */
}

#expandedImage img {
   max-width: 100%;
   max-height: 100%;
   opacity: 0;
   transition: opacity 0.5s; /* 过渡效果，可根据需要调整时间 */
}

JavaScript:

function expandImage(thumbnail) {
   thumbnail.style.transform = "scale(1.2)"; // 缩略图放大效果，可根据需要调整比例

   var expandedImage = document.getElementById("expandedImage");
   expandedImage.style.display = "flex";

   setTimeout(function() {
      expandedImage.style.opacity = "1";
      expandedImage.getElementsByTagName("img")[0].style.opacity = "1";
   }, 10);
}

这段代码使用了CSS的transition属性和JavaScript的scale和opacity属性来实现缩略图的平滑过渡效果。当点击缩略图时，缩略图会放大并淡入全宽图像页，同时背景色也会变暗。可以根据需要根据代码来调整过渡效果的细节。