求助：如何为360 Virtual Tour添加可点击淡出的覆盖图？

核心思路 #

用全屏覆盖层（包含目标图片）叠加在360漫游容器上方，初始状态显示，点击后通过CSS动画实现淡出，动画结束后让覆盖层不再阻挡交互，即可正常操作漫游。

代码实现 #

1. HTML结构 #

假设你的360漫游容器ID是vr-container，添加覆盖层元素：

<!-- 360漫游容器 -->
<div id="vr-container">
  <!-- 此处放置你的360漫游代码（如Pannellum、krpano等） -->
</div>

<!-- 初始覆盖图 -->
<div id="intro-overlay">
  <img src="你的覆盖图路径.jpg" alt="初始引导图">
</div>

2. CSS样式 #

设置覆盖层全屏覆盖，初始可见，添加淡出动画：

/* 漫游容器设为相对定位，让覆盖层基于它定位 */
#vr-container {
  position: relative;
  width: 100vw;
  height: 100vh;
}

/* 初始覆盖层样式 */
#intro-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000; /* 可选，与图片背景匹配 */
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 999;
  transition: opacity 0.5s ease-out;
}

#intro-overlay img {
  max-width: 100%;
  max-height: 100%;
}

/* 淡出后的状态 */
#intro-overlay.fade-out {
  opacity: 0;
  pointer-events: none; /* 不再阻挡鼠标交互 */
}

3. JavaScript交互逻辑 #

给覆盖层添加点击事件，触发淡出动画：

const overlay = document.getElementById('intro-overlay');

overlay.addEventListener('click', () => {
  overlay.classList.add('fade-out');
  
  // 可选：动画结束后移除元素，节省资源
  setTimeout(() => {
    overlay.remove();
  }, 500); // 时长与CSS transition的时长保持一致
});

适配不同360漫游库的注意事项 #

• 若使用Pannellum：确保漫游容器的position设为relative，覆盖层层级高于Pannellum画布即可。
• 若使用krpano：可将覆盖层放在krpano的div内部，或调整z-index保证覆盖在最上层。
• 图片路径需正确，建议使用相对路径或绝对路径，确保正常加载。

内容的提问来源于stack exchange，提问作者José Rotiélio E Silva Junior