基础版本

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第5天，[点击查看活动详情](https://juejin.cn/post/7147654075599978532 "https://juejin.cn/post/7147654075599978532") ## 前言在我们开发项目中，经常会遇到预览图片的需求。也就是点击图片，会全屏显示该图片。需求很简单，但是如何让实现更优雅就需要花点心思了。 ## 最终效果图 ![4.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f24f9d2818b040ceb75eb42732c5eb56~tplv-k3u1fbpfcp-watermark.image?) ## 基础版本 **实现方式** - 点击图片，创建蒙层，克隆图片 - 将图片添加定位属性，并添加到蒙层中 - 将蒙层添加到body中观察下图发现，虽然实现了需求，但是动画很生硬，我们作为前端开发工程师，得对得起`工程师`的身份，需要有工匠精神，接下来将介绍如何实现优雅的图片预览效果。 **效果图** ![1.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2be5137bf2c54a46aa208265a7bb9e56~tplv-k3u1fbpfcp-watermark.image?) **代码** ```html 基础版本

``` ## 打开动画 **实现方式** - 点击图片 - 克隆原图，计算原图当前距离窗口的top与left的距离（用于确定克隆图片的初始位置） - 计算克隆图片的初始位置以及其相关属性 - 创建蒙层，并添加相关的定位，背景色属性 - 使用`setTimeout`是为了触发`transition`，产生移动效果。 - 并且在`setTimeout`最开始将原图进行隐藏，产生是原图移动到屏幕中心的效果。使用`visibility`属性，避免引起页面布局变化。 - 为蒙层添加点击事件 - 点击蒙层后，删除蒙层元素，实现关闭预览功能 **效果图** ![2.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3cdfa964d06c4abbb847dd2f838cec57~tplv-k3u1fbpfcp-watermark.image?) **代码** ```html 添加预览动画

``` ## 关闭动画 > 上一个步骤中，实现了点击图片，图片流畅显示的动画。但是关闭的时候很突然，这次将实现关闭的流畅动画。 **实现方式** - 点击图片的时候获取原图的`宽度`，以及距离窗口`left`，`top`的距离 - 点击蒙层的时候将克隆图片的位置移动到原图的位置（根据前面获取的原图位置） - 当克隆图片回到原图的位置时，需要将原图进行显示。使用`visibility`属性。 - 使用`setTimeout`的原因是触发`transition`，产生动画效果。 - 使用300毫秒是因为`transition`设置的是300毫秒的过渡时间，为了能在克隆图片会到原图位置的时候，再显示原图，并删除蒙层。 **效果图** ![3.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/81f7839d8a844fb1b58a8e50446082b5~tplv-k3u1fbpfcp-watermark.image?) **代码** 查看下个步骤 ## 滚动时取消预览 **实现方式** - 在点击图片的时候，存储当前页面滚动的距离：`lastPositon` - 监听滚动事件，当滚动的距离减去`lastPositon`的值，大于`100px`的时候，触发蒙层的点击事件 - 蒙层收到点击动作后，会执行取消预览的一系列动作。 ## 完整代码 ```html 滚动时取消预览

``` **效果图** 查看文章首部 [https://github.com/jj19100/preview_picture.git](https://github.com/jj19100/preview_picture.git) **点赞收藏不迷路**