ps怎么退出全屏模式?(ps怎么退出全屏预览)

#标题创作挑战#

本文同步我在掘金平台的文章:https://juejin.cn/post/7135830434528624654.

今天，我们要讨论的问题是:

当我们点击图片时，我们需要它全屏显示。当我们再次点击它，图片退出全屏。

PS:我们在退出全屏播放的时候，一般都是按esc键退出。图片可以扩展到任何DOM节点。

文末我会把问题升级，留个话题给读者思考。

全屏图片，和全屏文章有一样的效果，比如下面的全屏文章:

仅仅一个元素就平滑了整个屏幕。

思路

所以，我们知道问题所在。解决问题的思路是什么？

我们获取到图片元素的 DOM 节点我们调用全屏的函数进行全屏展示浏览器监听点击事件，当图片是全屏的状态，再次点击图片的时候，调用函数退出全屏

好了，有想法了，来实现吧。

具体实现

假设我们有如下的html代码:

<img id="image" src="path/to/image.postfix" alt="img" />复制代码

现在我们编写下 javascript 代码。& ltimg id = & # 34图像& # 34；src = & # 34path/to/image . postfix & # 34；alt = & # 34img & # 34/& gt；复制代码现在让我们写javascript代码。

//退出全屏ngafterviewit(){ const image = document。getelementbyid(& # 39；图像& # 39；);image . addevent listener(& # 39；点击& # 39；，(event:any)= & gt；{ if(document . full screen element = = = image){ document . exit full screen()；} event . preven default()；})}//全屏查看公共全屏视图():void {const image = document。getelementbyid(& # 39；图像& # 39；);Image.requestFullscreen()}复制代码。这里我用打字稿写的。

当然，上面的代码没有考虑相关的兼容性。

requestFullscreen和exitFullscreen的方法对于现代浏览器来说还是比较能接受的，在PC上显示也没有什么压力。

然而，我们仍然必须以浏览器兼容的方式编写代码:

在这里，我创建了一个新的utils.ts文件:

导出类Utils { public static goto full screen(DOM:any):void { if(DOM . request full screen){ DOM . request full screen()} else if(DOM . mozrequest full screen){ DOM . webkitrequest full screen){ DOM . msrequest full screen){ DOM . msrequest full screen()} else { console . error(& # 39；当前浏览器不支持部分全屏！')} } public static exit full screen(DOM:any):void { if(DOM . exit full screen){ DOM . exit full screen()} else if(DOM . webkitexit full screen){ DOM。webkitexitfullscreen()} else if(DOM。msexifullscreen){ DOM。msexifullscreen()} }复制代码。上面两个方法是静态方法，调用方法是类名。静态方法，如Utils.gotoFullscreen(dom)。

问题升级

只要点击图片，我们需要它全屏显示。然后在设置全屏的时候，右上角有一个退出按钮。单击退出按钮退出全屏显示。

有兴趣的读者可以先自己尝试一下。

这里我给出一个简单的思路，供大家参考。

回答(点击展开)

1.设置布局，并在图片周围环绕一个div。2.在div中设置一个按钮元素，并为按钮制作css布局。3.当图片全屏时，显示按钮，复制按钮事件的代码(调用函数退出全屏)。你学会浪费了吗？

如果读者觉得文章还可以，不要防一键三通:注意收藏。