引言 今天，我们来探讨的问题是： 当点击图片的时候，我们需要其全屏展示，当我们再次点击的时候，图片退出全屏播放。 PS: 我们退出全屏播放的情况一般是按 esc 退出。图片可以延
引言今天，我们来探讨的问题是： 当点击图片的时候，我们需要其全屏展示，当我们再次点击的时候，图片退出全屏播放。 PS: 我们退出全屏播放的情况一般是按 esc 退出。图片可以延伸到任何的 DOM 节点 在文末，我会将问题升级，留一个题目给读者思考???? 图片全屏，这个跟文章全屏的效果一样，比如下面的文章全屏：
就是一个元素铺平整个屏幕 思路那么，问题我们知道了。解决问题的思路是怎么样的呢？
好了，思路有了，我们来实现下。 具体实现假设我们有 html 代码如下：
现在我们编写下 javascript 代码。
这里我用了 typescript 来编写 当然，上面的代码并没有考虑相关的兼容性。
requestFullscreen 和 exitFullscreen 方法对现代的浏览器支持还是很可以的，在 PC 端上展示毫无压力。 但是，我们还是得对代码进行浏览器兼容写法： 这里我新建了个 utils.ts 的文件：
上面两个方法都是静态方法，调用方式 类名.静态方法，比如：Utils.gotoFullscreen(dom)。 问题升级单点击图片，我们需要其全屏展示。然后设置全屏时候，右上角有一个退出的按钮。点击退出按钮，退出全屏展示。 感兴趣的读者可以先自己尝试下。 这里我给出简单的思路，可以作为参考。 1. 设定布局，将一个 div 包裹图片 2. 在 div 中设置一个按钮的元素 button，并对 button 进行 css 布局 3. 在图片全屏的时候，显示 button，并对 button 进行按钮事件（调用退出全屏的函数） |
2021-06-04
2019-01-10
2019-02-17
2021-09-12
2021-09-30
