帮助页面中演示的动态“屏幕截图”

时间:2012-02-20 16:42:38

标签: php jquery screenshot

我想通过添加网站各个部分的屏幕截图来改进我网站的“帮助”页面。我对制作这些静态图像犹豫不决,因为该网站仍在开发中,并且在不断变化的情况下也在不断变化。事实上,我甚至认为创建图像可能有点过分。

是否可以加载(通过PHP或JQuery)另一个页面的小部分(具有静态大小和x y)并将其显示在div中?

3 个答案:

答案 0 :(得分:2)

我们在帮助部分做了类似的事情,但我认为动态加载实时屏幕截图是一种资源。

实际上,我们在构建过程中就是在测试之后。无头浏览器(xvfb下的selenium)用于在我们预先部署的应用程序上获取不同页面的全屏截图。

然后,我们进行了修改,构建过程负责包括修改......

答案 1 :(得分:0)

将您想要“屏幕截图”的页面加载到具有所需大小的<iframe>并使用锚点或http://api.jquery.com/scroll/将内容移动到您想要显示的位置。

如果您不希望用户滚动或与iframe交互,只需在其上放置一个透明层。

答案 2 :(得分:0)

在屏幕上显示GIF来向用户显示如何快速执行操作也非常有帮助,而不是书面说明,因此,如果外观发生变化,用户可以继续查看如何执行操作,可以创建使用http://www.getcloudapp.com

屏幕录制GIF