开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何制作缩略图<img>在点击时显示完整尺寸的图像？

要制作缩略图，可以使用HTML和JavaScript。以下是一个简单的示例，展示了如何在点击缩略图时显示完整尺寸的图像：

首先，在HTML中创建一个缩略图和一个完整尺寸的图像元素：

<!DOCTYPE html>
<html>
<head>
 <style>
    .thumbnail {
      width: 100px;
      height: 100px;
      cursor: pointer;
    }
    .full-size {
      display: none;
      max-width: 100%;
      max-height: 100%;
    }
  </style>
</head>
<body>
  <img src="thumbnail.jpg" class="thumbnail" onclick="showFullSizeImage()" />
  <img src="full-size.jpg" class="full-size" id="full-size-image" />
</body>
</html>

接下来，使用JavaScript编写一个函数，当点击缩略图时，显示完整尺寸的图像：

  function showFullSizeImage() {
    var fullSizeImage = document.getElementById("full-size-image");
    if (fullSizeImage.style.display === "none") {
      fullSizeImage.style.display = "block";
    } else {
      fullSizeImage.style.display = "none";
    }
  }
</script>

这个示例中，缩略图和完整尺寸的图像都是通过HTML的<img>标签加载的。当用户点击缩略图时，JavaScript函数showFullSizeImage()会被调用，完整尺寸的图像会显示或隐藏。

注意：这个示例仅用于演示目的，实际应用中可能需要进行更多的优化和调整。

相关搜索:如何在点击具有相同id的单个图像时更改特定的img src React Native:如何在点击时全屏显示我的图像？如何在react中制作可点击的图像而不显示超链接？当我们单击图像缩略图时，如何显示带有图片的文本？如何仅当图像url存在时才在Vue.js中显示<img>？点击时如何在按钮切换中显示不同的图像？如何在使用wkwebview时使用cordova在img标签中显示摄像头图像如何只在点击时显示导航栏的下拉列表？当我点击不同的按钮时，如何显示另一个图像？如何在改变屏幕尺寸时保持按钮在图像上的位置和大小？如何在ArcGis JavaScript应用编程接口中显示地图点击时的附加图像？如何让不同的div在导航栏点击时显示在相同的位置？尝试显示存储在设备中的图像，但速度非常慢。我读到显示缩略图是一种更好的方法。如何生成缩略图？如何用jquery在动态点击按钮时在页面上的特定位置制作聊天框当我们在Flutter中点击列表中的任何图像时，如何在全屏中打开图像？如何阻止我的Modal在每次点击时都显示出来？如何使用Angular8在单击打印选项时显示完整的html内容当图像显示在我的滑块中时，如何从头开始播放图像动画？如何从MySQL数据库中检索BLOB格式的图像并显示在html <img>标签中？如何显示存储在Types.File中的KeystoneJS缩略图/预览图像？和模式url与publicPath

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

3分54秒

PS使用教程：如何在Mac版Photoshop中制作烟花效果？

Mac知识分享

3850

2分4秒

PS小白教程:如何在Photoshop中制作出水瓶上的水珠效果？

Mac知识分享

3900

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭