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 相关文章推荐
页面装载js及性能分析方法介绍
Mar 21 Javascript
原生Js实现简易烟花爆炸效果的方法
Mar 20 Javascript
JavaScript手机振动API
Jun 11 Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
Dec 02 Javascript
JavaScript无阻塞加载和defer、async详解
Feb 26 Javascript
基于layer.js实现收货地址弹框选择然后返回相应的地址信息
May 26 Javascript
vue跨域解决方法
Oct 15 Javascript
js循环map 获取所有的key和value的实现代码(json)
May 09 Javascript
jQuery实现获取form表单内容及绑定数据到form表单操作分析
Jul 03 jQuery
vue单页面在微信下只能分享落地页的解决方案
Apr 15 Javascript
JavaScript Dom 绑定事件操作实例详解
Oct 02 Javascript
微信小程序实现菜单左右联动
May 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函数memory_get_usage获取PHP内存清耗量的方法
2011/12/06 PHP
php遍历数组的方法分享
2012/03/22 PHP
浅谈php安全性需要注意的几点事项
2014/07/17 PHP
php使用MySQL保存session会话的方法
2015/06/26 PHP
Laravel 实现添加多语言提示信息
2019/10/25 PHP
在textarea文本域中显示HTML代码的方法
2007/03/06 Javascript
JS中处理与当前时间间隔的函数代码
2012/05/23 Javascript
如何用ajax来创建一个XMLHttpRequest对象
2012/12/10 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(二)
2017/01/21 Javascript
javaScript嗅探执行神器-sniffer.js
2017/02/14 Javascript
Canvas 绘制粒子动画背景
2017/02/15 Javascript
详谈表单重复提交的三种情况及解决方法
2017/08/16 Javascript
js技巧之十几行的代码实现vue.watch代码
2018/06/09 Javascript
Vue-Quill-Editor富文本编辑器的使用教程
2018/09/21 Javascript
vue百度地图 + 定位的详解
2019/05/13 Javascript
TypeScript类型声明书写详解
2019/08/28 Javascript
关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version
2020/10/17 Javascript
如何搭建一个完整的Vue3.0+ts的项目步骤
2020/10/18 Javascript
Python操作CouchDB数据库简单示例
2015/03/10 Python
使用Python的PEAK来适配协议的教程
2015/04/14 Python
Python中property属性实例解析
2018/02/10 Python
pytorch 实现在预训练模型的 input上增减通道
2020/01/06 Python
Numpy中的数组搜索中np.where方法详细介绍
2021/01/08 Python
微信小程序之html5 canvas绘图并保存到系统相册
2019/06/20 HTML / CSS
美国伊甸园兄弟种子公司:Eden Brothers
2018/07/01 全球购物
乌克兰品牌化妆品和香水在线商店:Bomond
2020/01/14 全球购物
经典大学生求职信范文
2014/01/06 职场文书
旷课检讨书1000字
2014/02/14 职场文书
应届毕业生应聘自荐信范文
2014/02/26 职场文书
2014年元旦感言
2014/03/06 职场文书
银行主办会计岗位职责
2014/08/13 职场文书
幼儿园六一亲子活动方案
2014/08/26 职场文书
学生自我评语
2015/01/04 职场文书
解析MySQL binlog
2021/06/11 MySQL
详细谈谈JavaScript中循环之间的差异
2021/08/23 Javascript
悬疑名作《朋友游戏》动画无字ED宣传片 新角色公开
2022/04/13 日漫