查找网页功能背后的源代码

Question

我对Web开发非常陌生，并且开始无所顾忌地看着不同的“功能”网站。我最近遇到了StarCraft remastered page，在页面的中间部分有一个“窗口”，在该窗口中，您可以前后滑动滑块，查看旧图形和场景的新图形。我认为这是非常整洁，我想知道如果我能找到他们如何达到这种效果的源代码。 Here is the image of the described "window".

此外，作为一个附注，尝试重新创建我在其他网站上找到的功能是不道德的吗？我真的很陌生，我不知道什么是好的，什么不是，我不认为我能够自己创造这个功能，而不会看到他们如何实现它。

Answer 1

根本不是不道德的，这就是web开发人员学习新东西的方式。一般来说，浏览器的开发者工具应该成为你最好的朋友。

关于您提供的示例，基本上可以使用通常称为“分隔线”或“分割面板”的ui控件来实现。你可以找到很多提供这种功能的插件（例如split.js）。有了这个，以及一些CSS样式，你可以达到与你在Starcraft页面中喜欢的效果相同的效果。

Answer 2

在任何现代浏览器上，右键单击图像上的鼠标，然后单击“检查”，“检查元素”或其某些变体，具体取决于浏览器和版本。我正在使用最新版本的Chrome，它只是“检查”。

这将打开您的开发人员工具，以深入了解网站或Web应用程序的前端。