jquery点击图片放大显示原图效果

基础概念： jQuery点击图片放大显示原图效果是一种常见的网页交互设计，它允许用户通过点击缩略图来查看图片的完整版本。这种效果通常通过弹出一个模态框（modal）或者在新窗口中显示大图来实现。

优势：

提升用户体验：用户无需离开当前页面即可查看图片的详细信息。
节省流量：只需加载一次缩略图，大图在需要时才加载。
加快页面加载速度：因为大图的尺寸通常比缩略图大得多，所以延迟加载可以提高页面的整体性能。

类型：

模态框放大：点击图片后，在当前页面上弹出一个覆盖层显示大图。
新窗口/标签页打开：点击图片后，在新窗口或标签页中打开大图。

应用场景：

图片画廊：在艺术作品展示、摄影作品集等场景中非常常见。
电商网站：用于展示商品的详细图片。
社交媒体：用户点击头像查看完整照片。

示例代码（使用模态框放大效果）：

HTML:

<img src="thumbnail.jpg" alt="Thumbnail" class="thumbnail" data-src="fullsize.jpg">
<div id="modal" class="modal">
  <span class="close-button">&times;</span>
  <img class="modal-content" id="img01">
</div>

CSS:

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.9);
}

.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}

JavaScript (jQuery):

$(document).ready(function(){
  $('.thumbnail').click(function(){
    var src = $(this).data('src');
    $('#img01').attr('src', src);
    $('#modal').css('display', 'block');
  });

  $('.close-button').click(function(){
    $('#modal').css('display', 'none');
  });
});

可能遇到的问题及解决方法：