博客从去年十二月开始就一直在用 Fancybox 作为博客的图片灯箱插件，之前还在用 Typecho 搭建博客的时候就在用这个库。所谓灯箱，其实就是点击图片之后将图片放大并居中显示，就像现实世界中的广告灯牌一样。不过我其实一直很想要把 Fancybox 换掉，因为它太臃肿了，包含了很多我不需要的功能（比如 1:1 放大、镜像翻转、前后切换等等），体积接近 100 KB；不仅如此，Fancybox 实际上是一个商业库，并不是免费开源的。出于这些原因，我决定自己从零开始做一个灯箱插件。 原则和技术选型 我希望项目能做到足够「轻」，一方面是打包后要足够小，另一方面是运行时不需要消耗太多资源。权衡之后，还有一个点就是必要的配置项足够少，最好能做到零配置起步。我决定用原生 JavaScript 编写，毕竟需求没有很复杂。由于需求本身足够简单，除了开发时会用到的一些依赖，打包后的库不应该包含或依赖于任何第三方库，这也能避免不必要的维护工作。此外，目前我能找到的灯箱插件大多都包含了多图排版功能或者额外的图片缩放操作，我希望这个库能够专注于需求本身，只要把图片放大就好了。 轻量、原生、专一， 非常适合用作软件的宣传噱头的 三个基调就这么定好了！ 模块设计 需求只有一个，点击图片后播放动画并放大以供查看，再明确不过了，完全可以跳过需求分析的步骤，直接开始设计。 由于点击图片之后需要播放动画——原图片从原位置、原大小逐渐过渡到屏幕正中间、放大显示的状态——而图片 <img> 本身是一个行内元素或块元素，要让其「飞离」容器会有些困难，所以我的想法是构造一个影子元素（Shadow），通过绝对定位覆盖在图片上方，由于影子元素是绝对定位的，要放大和位移就很方便了。 除了放在正中央的图片，要组成灯箱，往往还需要遮罩（Overlay）。遮罩平时隐藏，打开图片灯箱之后显示在其他元素和影子图片之间，这样在视觉...