滚动灯箱画廊：点击图片全屏显示及横向滚动切换需求实现

你现在的问题在于点击后直接把所有图片改成100%宽高，但没定位到被点击的目标图片，也没处理全屏状态下的布局逻辑。咱们一步步修改，实现你想要的效果：

1. 微调HTML结构 #

给每个.imageWrapper加上索引属性方便后续定位，同时把footer移到滚动容器外，避免全屏时被误影响：

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
  <div class="wrapper" id="column">
    <div class="scrolls">
      <div class="imageWrapper" data-index="0">
        <img src="images/01.jpg" />
        <a href="" class="cornerLink">Link</a>
      </div>
      <div class="imageWrapper" data-index="1">
        <img src="images/02.jpg" />
        <a href="" class="cornerLink">Link</a>
      </div>
      <!-- 其余图片模块重复上述结构即可 -->
    </div>
  </div>
  <?php include 'footer.php';?> <!-- 移到滚动容器外，布局更合理 -->
</body>

2. 完善CSS样式 #

新增全屏状态的专属样式，同时优化基础布局的兼容性：

.wrapper {
  margin: auto;
  text-align: center;
  position: absolute;
  bottom: 0;
  width: 100%;
}
.scrolls {
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  height: calc(100vh - 120px); /* 预留footer高度 */
  transition: all 0.3s ease;
}
.scrolls img {
  width: 275px;
  cursor: pointer;
  display: inline-block;
  vertical-align: top;
}
.imageWrapper {
  display: inline-block;
  position: relative;
  margin-bottom: 0; /* 移除旧的底部边距，避免布局错乱 */
  height: 100%;
}
.imageWrapper img {
  display: block;
  height: 100%;
  object-fit: contain; /* 保持图片比例，防止拉伸变形 */
}

/* 全屏状态核心样式 */
.scrolls.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  z-index: 9999;
  background: #000; /* 全屏时用黑色背景增强视觉聚焦 */
}
.scrolls.fullscreen .imageWrapper {
  width: 100vw;
  height: 100vh;
}
.scrolls.fullscreen img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 保证图片适配屏幕且比例不变 */
}
.footerclass {
  transition: opacity 0.3s ease;
}
.footerclass.hidden {
  opacity: 0;
  pointer-events: none; /* 隐藏后禁止交互 */
}

3. 优化JavaScript逻辑 #

实现点击触发全屏、定位目标图片，以及退出全屏的交互：

$(document).ready(function() {
  // 点击图片进入全屏模式
  $('.imageWrapper img').click(function() {
    const $scrollContainer = $('.scrolls');
    const $targetWrapper = $(this).closest('.imageWrapper');
    const targetIndex = $targetWrapper.data('index');
    
    // 切换全屏状态，隐藏footer
    $scrollContainer.addClass('fullscreen');
    $('.footerclass').addClass('hidden');
    
    // 滚动到被点击的图片位置，确保用户看到目标图
    const scrollPosition = $targetWrapper.offset().left - $scrollContainer.offset().left;
    $scrollContainer.scrollLeft(scrollPosition);
  });
  
  // 点击全屏区域空白处退出全屏（排除点击链接的情况）
  $('.scrolls').on('click', '.fullscreen', function(e) {
    if (!$(e.target).hasClass('cornerLink')) {
      $(this).removeClass('fullscreen');
      $('.footerclass').removeClass('hidden');
    }
  });
  
  // 按ESC键快速退出全屏
  $(document).keydown(function(e) {
    if (e.keyCode === 27 && $('.scrolls').hasClass('fullscreen')) {
      $('.scrolls').removeClass('fullscreen');
      $('.footerclass').removeClass('hidden');
    }
  });
});

关键逻辑说明 #

• 用fullscreen类切换状态，比直接修改样式更易维护和扩展
• 点击后自动滚动到目标图片，保证用户视觉聚焦在自己点击的内容上
• object-fit: contain确保图片在全屏时不会变形，适配不同屏幕尺寸
• 增加两种退出全屏的方式，提升用户操作体验

内容的提问来源于stack exchange，提问作者user8899874