查找網頁功能背後的源代碼

我對Web開發非常陌生，並且開始無所顧忌地看着不同的「功能」網站。我最近遇到了StarCraft remastered page，在頁面的中間部分有一個「窗口」，在該窗口中，您可以前後滑動滑塊，查看舊圖形和場景的新圖形。我認爲這是非常整潔，我想知道如果我能找到他們如何達到這種效果的源代碼。 Here is the image of the described "window".查找網頁功能背後的源代碼

此外，作爲一個附註，嘗試重新創建我在其他網站上找到的功能是不道德的嗎？我真的很陌生，我不知道什麼是好的，什麼不是，我不認爲我能夠自己創造這個功能，而不會看到他們如何實現它。

來源

2017-08-19 Patrick Thompson

根本不是不道德的，這就是web開發人員學習新東西的方式。一般來說，瀏覽器的開發者工具應該成爲你最好的朋友。

關於您提供的示例，基本上可以使用通常稱爲「分隔線」或「分割面板」的ui控件來實現。你可以找到很多提供這種功能的插件（例如split.js）。有了這個，以及一些CSS樣式，你可以達到與你在Starcraft頁面中喜歡的效果相同的效果。

來源

2017-08-19 06:36:33 mpilliador

在任何現代瀏覽器上，右鍵單擊圖像上的鼠標，然後單擊「檢查」，「檢查元素」或其某些變體，具體取決於瀏覽器和版本。我正在使用最新版本的Chrome，它只是「檢查」。

這將打開您的開發人員工具，以深入瞭解網站或Web應用程序的前端。

來源

2017-08-19 07:45:20

Gotcha。我知道檢查員，但我真的不知道如何找到影響DOM元素的Javascript部分。 –

快速瀏覽它看起來是用CSS完成的。基本上這兩個剪輯是在同一時間直接在彼此頂部播放。根據滑塊的位置，根據滑塊的位置，包含原始版本剪輯的div的可見性（或在此特定實例中的寬度）將顯示或隱藏。隨着開發工具打開，採取你的'元素'選項卡，來回滑動，注意添加或刪除的CSS類，以及原始版本的動畫剪輯的寬度根據位置調整的div。 –

查找網頁功能背後的源代碼

回答

相關問題