JavaScript 实现点击关闭全屏示例详解
更新时间：2022年08月26日 08:58:24 作者：Jimmy
这篇文章主要为大家介绍了JavaScript 实现点击关闭全屏示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
引言
今天，我们来探讨的问题是：
当点击图片的时候，我们需要其全屏展示，当我们再次点击的时候，图片退出全屏播放。
PS: 我们退出全屏播放的情况一般是按 esc 退出。图片可以延伸到任何的 DOM 节点
在文末，我会将问题升级，留一个题目给读者思考🤔
图片全屏，这个跟文章全屏的效果一样，比如下面的文章全屏：
就是一个元素铺平整个屏幕
思路
那么，问题我们知道了。解决问题的思路是怎么样的呢？
- 我们获取到图片元素的 DOM 节点
- 我们调用全屏的函数进行全屏展示
- 浏览器监听点击事件，当图片是全屏的状态，再次点击图片的时候，调用函数退出全屏
好了，思路有了，我们来实现下。
具体实现
假设我们有 html 代码如下：
<img id="image" src="path/to/image.postfix" alt="img" />
现在我们编写下 javascript 代码。
// 退出全屏
ngAfterViewInit() {
const image = document.getElementById('image');
image.addEventListener('click', (event: any) => {
if(document.fullscreenElement === image) {
document.exitFullscreen();
}
event.preventDefault();
})
}
// 全屏查看
public fullscreenView(): void {
const image = document.getElementById('image');
image.requestFullscreen()
}
这里我用了 typescript 来编写
当然，上面的代码并没有考虑相关的兼容性。
requestFullscreen 和 exitFullscreen 方法对现代的浏览器支持还是很可以的，在 PC 端上展示毫无压力。
但是，我们还是得对代码进行浏览器兼容写法：
这里我新建了个 utils.ts 的文件：
export class Utils {
public static gotoFullscreen(dom: any): void {
if (dom.requestFullscreen) {
dom.requestFullscreen()
} else if (dom.mozRequestFullScreen) {
dom.mozRequestFullScreen()
} else if (dom.webkitRequestFullscreen) {
dom.webkitRequestFullscreen()
} else if (dom.msRequestFullscreen) {
dom.msRequestFullscreen()
} else {
console.error('当前浏览器不支持部分全屏！')
}
}
public static exitFullscreen(dom: any): void {
if (dom.exitFullscreen) {
dom.exitFullscreen()
} else if (dom.webkitExitFullscreen) {
dom.webkitExitFullscreen()
} else if (dom.msExitFullscreen) {
dom.msExitFullscreen()
}
}
}
上面两个方法都是静态方法，调用方式 类名.静态方法，比如：Utils.gotoFullscreen(dom)。
问题升级
单点击图片，我们需要其全屏展示。然后设置全屏时候，右上角有一个退出的按钮。点击退出按钮，退出全屏展示。
感兴趣的读者可以先自己尝试下。
这里我给出简单的思路，可以作为参考。
1. 设定布局，将一个 div 包裹图片
2. 在 div 中设置一个按钮的元素 button，并对 button 进行 css 布局
3. 在图片全屏的时候，显示 button，并对 button 进行按钮事件（调用退出全屏的函数）
以上就是JavaScript 实现点击关闭全屏示例详解的详细内容，更多关于JavaScript 点击关闭全屏的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要为大家介绍了Electron 网络拦截实战示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
这篇文章主要介绍了JavaScript实现余额数字滚动效果，将传入的带滚动的n位数字拆分成每一个要滚动的数，然后动态的创建装着滚动到每一位相应数字的容器，然后放入传入的目标容器中，更多详细内容，一起进入下面文章学习吧2021-12-12
这篇文章主要介绍了微信小程序 后台登录（非微信账号）实例详解的相关资料,需要的朋友可以参考下2017-03-03
这篇文章主要为大家介绍了解析Clipboard API剪贴板操作实例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
这篇文章主要为大家介绍了JS 实现伪3D手办模型展台示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
这篇文章主要为大家介绍了TS 类型兼容教程示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
这篇文章主要介绍了 关于JavaScript 中 if包含逗号表达式，有时会看到JavaScript中if判断里包含英文逗号 “,”，这个是其实是逗号表达式。在if条件里，只有最后一个表达式起判断作用。下面来看看文章的具体介绍吧2021-11-11
这篇文章主要介绍了微信小程序 缓存（本地缓存、异步缓存、同步缓存）详解的相关资料,需要的朋友可以参考下2017-01-01
这篇文章主要介绍了微信小程序 chooseImage选择图片或者拍照的相关资料,需要的朋友可以参考下2017-04-04
这篇文章主要介绍了为输入框加入数字js校验代码分享，还是比较不错的，这里分享给大家，供需要的朋友参考。2017-11-11
最新评论