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 相关文章推荐
setInterval 和 setTimeout会产生内存溢出
Feb 15 Javascript
JS location几个方法小姐
Jul 09 Javascript
理解Javascript_01_理解内存分配原理分析
Oct 11 Javascript
Egret引擎开发指南之视觉编程
Sep 03 Javascript
浅析jquery数组删除指定元素的方法:grep()
May 19 Javascript
jquery获取所有选中的checkbox实现代码
May 26 Javascript
JavaScript的兼容性与调试技巧
Nov 22 Javascript
JQuery ZTree使用方法详解
Jan 07 Javascript
WebView启动支付宝客户端支付失败的问题小结
Jan 11 Javascript
微信小程序学习笔记之本地数据缓存功能详解
Mar 29 Javascript
Vue+Element实现动态生成新表单并添加验证功能
May 23 Javascript
extjs图形绘制之饼图实现方法分析
Mar 06 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 Array交叉表实现代码
2010/08/05 PHP
ThinkPHP+EasyUI之ComboTree中的会计科目树形菜单实现方法
2017/06/09 PHP
PHP常见的几种攻击方式实例小结
2019/04/29 PHP
js计算页面刷新的次数
2009/07/20 Javascript
JavaScript中也使用$美元符号来代替document.getElementById
2010/06/19 Javascript
去掉gridPanel表头全选框的小例子
2013/07/18 Javascript
动态读取JSON解析键值对的方法
2014/06/03 Javascript
详解Javascript动态操作CSS
2014/12/08 Javascript
jquery插件hiAlert实现网页对话框美化
2015/05/03 Javascript
浏览器中url存储的JavaScript实现
2015/07/07 Javascript
jquery结合html实现中英文页面切换
2016/11/29 Javascript
nodejs 实现钉钉ISV接入的加密解密方法
2017/01/16 NodeJs
javascript设计模式之模块模式学习笔记
2017/02/15 Javascript
微信小程序之绑定点击事件实例详解
2017/07/07 Javascript
教你用Cordova打包Vue项目的方法
2017/10/17 Javascript
详解vue mixins和extends的巧妙用法
2017/12/20 Javascript
[50:48]LGD vs CHAOS 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
如何在python字符串中输入纯粹的{}
2018/08/22 Python
Python的条件表达式和lambda表达式实例
2019/01/31 Python
Python后台开发Django会话控制的实现
2019/04/15 Python
python启动应用程序和终止应用程序的方法
2019/06/28 Python
PyTorch中Tensor的拼接与拆分的实现
2019/08/18 Python
Python字符串中添加、插入特定字符的方法
2019/09/10 Python
将python2.7添加进64位系统的注册表方式
2019/11/20 Python
基于logstash实现日志文件同步elasticsearch
2020/08/06 Python
torchxrayvision包安装过程(附pytorch1.6cpu版安装)
2020/08/26 Python
python 实现客户端与服务端的通信
2020/12/23 Python
详解css3自定义滚动条样式写法
2017/12/25 HTML / CSS
html5 touch事件实现触屏页面上下滑动(一)
2016/03/10 HTML / CSS
canvas实现按住鼠标移动绘制出轨迹的示例代码
2018/02/05 HTML / CSS
Linux机考试题
2015/07/17 面试题
自荐信的五个重要部分
2013/10/29 职场文书
军训自我鉴定
2014/01/22 职场文书
法学专业求职信
2014/07/15 职场文书
结婚喜宴迎宾词
2015/08/10 职场文书
火锅店的开业营销方案范本!
2019/07/05 职场文书