图像比较滑块

简介

图像比较滑块，其起源不太可考。不过还是能找到流行的源头：ZURB。ZURB 是网页设计公司， 在开源领域也取得了不小的成就，比如响应式前端框架 foundatio。

2013年6月，ZURB 在改进 无头浏览器截图工具 时，需要展示两个图像之间的视觉差异。 而常规的方法不够有效（就像「找不同」游戏一样麻烦），于是 设计主管 推荐了加拿大鹅网站的 仿冒品对比页面。

此页面中，用户能移动滑块，精确的比对两张图片相同位置的差异。然后 ZURB 的开发者使用 jQuery 复刻了此功能， 并认为这个工具非常实用，于是在完善后开源到了 GitHub，其名为 TwentyTwenty。

附言：TwentyTwenty 的含义是指视力正常，因为 20/20 是指在 20 英尺距离，看到理论正常视力的内容，也就是 1.0 的视力。 （说明「找不同」游戏确实麻烦）

一些使用经验

TwentyTwenty 毕竟使用的是 jQuery，占用高是出了名的，并且现在也不流行使用它。所以需要寻找替代品。

neas/img-comparison-slider 的体积很合理，不到 12 KiB， 符合现代的轻量网站需求。并且也时常维护，而 TwentyTwenty 确实多年未维护了（6 年），所以选择 ICS 很合理。

gledos 的 ICS 比较简单粗暴，需要的时候，在页面中插入 <script> <style> 标签，然后使用下面的写法：

> [!abstract]+ 英文／中文
>
> <img-comparison-slider markdown=1>
> ![英文](en.avif){: .off-glb slot="first" }
> ![中文](zh.avif){: .off-glb slot="second" }
> </img-comparison-slider>

混杂 Markdown 写法是想让画面偏向 Markdown 一些，虽然不多，毕竟 Attribute List 的属性还是太显眼了。但 gledos 还是希望尽量以 Markdown 来写。

比起官方的写法，这里主要是增加了 .off-glb 这个 Class，目的是让 MkDocs GLightbox 插件不要影响 ICS。 然后这个 Class 还能起到防止透明图片叠在一起的情况，CSS 如下。

.off-glb{ background: var(--md-default-bg-color); }

--md-default-bg-color 是 MkDocs Material 的背景色，这样能让切换明暗主题时，也让图片的背景色保持。

演示

寧瑠（兔女郎）／妮露（邦妮）

其他的示例，可以在 蔚蓝档案、CSGO、巫师之昆特牌、 碧蓝航线 看到。

（由于更新时间是手动更新的，所以部分页面内容已更新，但忘记修改新的日期了……）