全屏效果想必我们都很清楚把,平时追剧看电视剧什么都会使用全屏方便我们看,我们键盘的第一个键esc可以退出全屏,那么我们如何用js实现全屏的办法呢?
设置全屏
Document.requestFullscreen(),该方法用于异步请求使元素进入全屏模式,结果会返回一个promise。
设置退出全屏
Document.exitFullscreen(),该方法可以使当前文档退出全屏模式。使元素恢复到之前的状态。
判断进入全屏和退出全屏的点击事件,给html中绑定fscreen()的点击事件
这样第一次点击时就会变成全屏,第二次点击时就会退出全屏并重复此次操作。
// 进入全屏和退出全屏的点击事件function fscreen() {var el = document.documentElementvar isFullscreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreenif (!isFullscreen) {//进入全屏;(el.requestFullscreen && el.requestFullscreen()) ||(el.mozRequestFullScreen && el.mozRequestFullScreen()) ||(el.webkitRequestFullscreen && el.webkitRequestFullscreen()) ||(el.msRequestFullscreen && el.msRequestFullscreen())} else {//退出全屏document.exitFullscreen ?document.exitFullscreen() :document.mozCancelFullScreen ?document.mozCancelFullScreen() :document.webkitExitFullscreen ?document.webkitExitFullscreen() :''}}