全屏放大图像并悬停滚动

Question

我试图复制这个示例，您可以点击该图片，它会全屏放大，然后您可以将鼠标悬停在上下滚动。

www.uniqlo.com/us/product/women-slim-fit-jeans-143893.html#69 | /妇女/塔底/牛仔裤/修身/ |

不知道从哪里开始，我使用光滑的滑块作为基础。

Answer 1

首先将任务划分为不同的步骤。

• 创建所需的标记。您可以选择无序的图像列表。每个列表项都可以包含缩略图和原始图像，原始图像在初始加载时保持隐藏状态。
• 将事件侦听器添加到列表中，并侦听单击图像的时间。
• 如果点击了图像，请加载屏幕顶部的叠加层以覆盖所有内容。然后绝对定位大图像并使用较高的z-index
将其显示在该叠加层的顶部
• 对于滚动，您可以使用一些技巧。其中一个是计算鼠标指针的位置并更改scrollTop值以获得滚动悬停效果。

自您要求开始的地方以来，没有粘贴任何代码。这应该可以让您了解需要做什么。如果您需要有关代码的帮助，请告诉我。

注意 - 我在不允许我打开URL的代理服务器后面。我试图想象你想要什么并回答。