前后对比滑块生成器

工作原理

「后」图以完整尺寸显示在底层,而「前」图叠放在其上方的容器中,容器宽度由一个不可见的滑块控制:拖动滑块,即可逐步显现下方的图片。上方的预览直接在工具中运行,生成的代码以纯 HTML/CSS 实现同样的原理,不依赖任何外部 JavaScript。

如何将生成的代码嵌入我的网站?

复制生成的 HTML 代码,将两个 src 属性替换为您图片的实际路径(托管在您自己的服务器上),或替换为完整的 base64 编码版本;代码中内置的原生 input[type=range] 滑块负责交互,无需任何额外的库。

可以修改「前」和「后」的标签吗?

可以。通过标签输入框,您可以自定义滑块两个角上显示的文字(例如「施工前」/「施工后」,或日期),预览和生成的代码中都会生效。

预览和代码生成完全在您的浏览器中完成:您的图片不会上传到任何服务器。