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

Question

我对Web开发很陌生，并开始愚弄查看不同的“功能”网站。我最近遇到了StarCraft remastered page，在页面中间有一个“窗口”，你可以在其中来回滑动滑块，看看旧图形和场景的新图形。我认为这真的很整洁，我想知道我是否能找到它们如何实现这种效果的源代码。 Here is the image of the described "window".

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

Answer 1

根本不是不道德的，这就是Web开发人员学习新东西的方式。通常，浏览器的开发者工具应该成为您最好的朋友。

关于您提供的示例，基本上可以使用通常称为“分隔符”或“拆分面板”的ui控件来实现。你可以找到很多提供这种功能的插件（ex split.js）。有了它，还有一些用于造型的CSS，你可以达到与星际页面中你喜欢的效果相同的效果。

Answer 2

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

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