目录引言思路具体实现问题升级引言 今天,我们来探讨的问题是: 当点击图片的时候,我们需要其全屏展示,当我们再次点击的时候,图片退出全屏播放。 PS: 我们退出全屏播放的情况一般是按
今天,我们来探讨的问题是:
当点击图片的时候,我们需要其全屏展示,当我们再次点击的时候,图片退出全屏播放。
PS: 我们退出全屏播放的情况一般是按 esc 退出。图片可以延伸到任何的 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 点击关闭全屏的资料请关注编程网其它相关文章!
--结束END--
本文标题: JavaScript实现点击关闭全屏示例详解
本文链接: https://www.lsjlt.com/news/166053.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0