JS实现指定区域的全屏显示功能示例


Posted in Javascript onApril 25, 2019

本文实例讲述了JS实现指定区域的全屏显示功能。分享给大家供大家参考,具体如下:

<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>3water.com js指定区域全屏</title>
    <style>
      #fulldiv {
        background: #fff;
        width: 100%;
        text-align: center;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <h1>指定区域全屏测试</h1>
    <button id="btn">全屏按钮</button>
    <div id="fulldiv">
      <h1>这里是全屏显示的内容</h1>
    </div>
  </body>
  <script>
    var fullscreen = false;
    let btn = document.getElementById('btn');
    let fullarea = document.getElementById('fulldiv')
    btn.addEventListener('click',function(){  
      if (fullscreen) {    // 退出全屏
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {    // 进入全屏
        if (fullarea.requestFullscreen) {
          fullarea.requestFullscreen();
        } else if (fullarea.webkitRequestFullScreen) {
          fullarea.webkitRequestFullScreen();
        } else if (fullarea.mozRequestFullScreen) {
          fullarea.mozRequestFullScreen();
        } else if (fullarea.msRequestFullscreen) {
          // IE11
          fullarea.msRequestFullscreen();
        }
      }
      fullscreen = !fullscreen;
    })
  </script>
</html>

感兴趣的朋友还可以使用在线HTML/CSS/JavaScript代码运行工具http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
初学prototype,发个JS接受URL参数的代码
Sep 25 Javascript
Javascript 函数中的参数使用分析
Mar 27 Javascript
详解jquery uploadify 上传文件
Nov 09 Javascript
如何实现修改密码时密码框显示保存到cookie的密码
Dec 10 Javascript
2014最热门的JavaScript代码高亮插件推荐
Nov 25 Javascript
jQuery实现ToolTip元素定位显示功能示例
Nov 23 Javascript
js 性能优化之算法和流程控制
Feb 15 Javascript
详解如何用webpack打包一个网站应用项目
Jul 12 Javascript
jquery+css实现下拉列表功能
Sep 03 jQuery
详解vue-router 路由元信息
Sep 13 Javascript
JavaScript数组push方法使用注意事项
Oct 30 Javascript
Vue中使用webpack别名的方法实例详解
Jun 19 Javascript
使用React手写一个对话框或模态框的方法示例
Apr 25 #Javascript
elementUI Tree 树形控件的官方使用文档
Apr 25 #Javascript
微信小程序Flex布局用法深入浅出分析
Apr 25 #Javascript
详解如何实现Element树形控件Tree在懒加载模式下的动态更新
Apr 25 #Javascript
小程序开发踩坑:页面窗口定位(相对于浏览器定位)(推荐)
Apr 25 #Javascript
微信小程序整合使用富文本编辑器的方法详解
Apr 25 #Javascript
微信小程序实现的五星评价功能示例
Apr 25 #Javascript
You might like
PHP运行环境配置与开发环境的配置(图文教程)
2013/06/04 PHP
解析PHP的session过期设置
2013/06/29 PHP
php中cookie实现二级域名可访问操作的方法
2014/11/11 PHP
PHP过滤黑名单关键字的方法
2014/12/01 PHP
php 的多进程操作实践案例分析
2020/02/28 PHP
EasyUI中的tree用法介绍
2011/11/01 Javascript
打开新窗口关闭当前页面不弹出关闭提示js代码
2013/03/18 Javascript
jquery子元素过滤选择器使用示例
2013/06/24 Javascript
JavaScript对内存分配及管理机制详细解析
2013/11/11 Javascript
详解jQuery向动态生成的内容添加事件响应jQuery live()方法
2015/11/02 Javascript
JavaScript实现简单评论功能
2017/08/17 Javascript
angular之ng-template模板加载
2017/11/09 Javascript
详解vue-cli 接口代理配置
2017/12/13 Javascript
jQuery实现动态显示select下拉列表数据的方法
2018/02/05 jQuery
Vue使用mixins实现压缩图片代码
2018/03/14 Javascript
Vue前端判断数据对象是否为空的实例
2020/09/02 Javascript
[04:47]DOTA2-潍坊风行电子俱乐部探秘
2014/08/08 DOTA
Python中的Numeric包和Numarray包使用教程
2015/04/13 Python
Django REST为文件属性输出完整URL的方法
2017/12/18 Python
python+splinter实现12306网站刷票并自动购票流程
2018/09/25 Python
python调用c++传递数组的实例
2019/02/13 Python
Python利用字典破解WIFI密码的方法
2019/02/27 Python
python中时间模块的基本使用教程
2019/05/14 Python
python异常处理try except过程解析
2020/02/03 Python
python mysql 字段与关键字冲突的解决方式
2020/03/02 Python
Lombok插件安装(IDEA)及配置jar包使用详解
2020/11/04 Python
英国50岁以上人群的交友网站:Ourtime
2018/03/28 全球购物
化石印度尼西亚在线商店:Fossil Indonesia
2019/03/11 全球购物
如何通过jdbc调用存储过程
2012/04/19 面试题
奶茶店创业计划书范文
2014/01/17 职场文书
硕士研究生求职自荐信范文
2014/03/11 职场文书
公司感恩节活动策划书
2014/10/11 职场文书
2014年生产管理工作总结
2014/12/23 职场文书
民事调解书范文
2015/05/20 职场文书
MySQL连接查询你真的学会了吗?
2021/06/02 MySQL
如何搭建 MySQL 高可用高性能集群
2021/06/21 MySQL