前端JS实现全屏和退出全屏的效果

简介: 前端JS实现全屏和退出全屏的效果

全屏效果想必我们都很清楚把,平时追剧看电视剧什么都会使用全屏方便我们看,我们键盘的第一个键esc可以退出全屏,那么我们如何用js实现全屏的办法呢?

设置全屏

Document.requestFullscreen(),该方法用于异步请求使元素进入全屏模式,结果会返回一个promise。

设置退出全屏

Document.exitFullscreen(),该方法可以使当前文档退出全屏模式。使元素恢复到之前的状态。

判断进入全屏和退出全屏的点击事件,给html中绑定fscreen()的点击事件

这样第一次点击时就会变成全屏,第二次点击时就会退出全屏并重复此次操作。

// 进入全屏和退出全屏的点击事件
      function fscreen() {
        var el = document.documentElement
        var isFullscreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen
        if (!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() :
            ''
        }
      }


 

目录
相关文章
|
9月前
|
JavaScript 前端开发 API
|
9月前
|
前端开发 JavaScript 数据可视化
58K star!这个让网页动起来的JS库,前端工程师直呼真香!
Anime.js 是一款轻量级但功能强大的JavaScript动画引擎,它能够以最简单的方式为网页元素添加令人惊艳的动效。这个项目在GitHub上已经获得58,000+星标,被广泛应用于电商页面、数据可视化、游戏开发等场景。
362 8
|
9月前
|
JavaScript 前端开发 容器
|
9月前
|
JavaScript 前端开发
|
9月前
|
存储 JavaScript 前端开发
|
9月前
|
移动开发 JavaScript 前端开发
|
10月前
|
资源调度 JavaScript 前端开发
前端开发必备!Node.js 18.x LTS保姆级安装教程(附国内镜像源配置)
本文详细介绍了Node.js的安装与配置流程,涵盖环境准备、版本选择(推荐LTS版v18.x)、安装步骤(路径设置、组件选择)、环境验证(命令测试、镜像加速)及常见问题解决方法。同时推荐开发工具链,如VS Code、Yarn等,并提供常用全局包安装指南,帮助开发者快速搭建高效稳定的JavaScript开发环境。内容基于官方正版软件,确保合规性与安全性。
9826 23
|
9月前
|
存储 JavaScript 前端开发
|
9月前
|
JavaScript 前端开发
|
9月前
|
JavaScript 前端开发

热门文章

最新文章