重新创建Medium的图像缩放

Question

我想重新创建当您单击图像并希望查看其较大版本时Medium使用的图像缩放效果。

这是一个例子.gif。

我尝试了多种方式，使用jQuery CSS转换，等等 - 但是我遇到了很多麻烦。

我怎样才能重新创建这样的效果？

Answer 1

使用CSS转换属性可以实现放大和缩小效果。基本上，您将图像转换为窗口中心，然后缩放图像。要缩小，只需删除变换值。

实际上有一个开源的Medium的图像缩放库，使用jQuery称为zoom.js。我还使用纯JavaScript实现了类似的库Zooming。