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 相关文章推荐
编写兼容IE和FireFox的脚本
May 18 Javascript
JavaScript 学习笔记二 字符串拼接
Mar 28 Javascript
浅析javascript操作 cookie对象
Dec 26 Javascript
javascript函数式编程实例分析
Apr 25 Javascript
js实现简单的联动菜单效果
Aug 19 Javascript
JavaScript学习笔记之取数组中最大值和最小值
Mar 23 Javascript
js清除浏览器缓存的几种方法
Mar 15 Javascript
vue-cli3添加模式配置多环境变量的方法
Jun 05 Javascript
JavaScript:ES2019 的新特性(译)
Aug 08 Javascript
优雅的使用javascript递归画一棵结构树示例代码
Sep 22 Javascript
vue中封装axios并实现api接口的统一管理
Dec 25 Vue.js
Vue单页面应用中实现Markdown渲染
Feb 14 Vue.js
使用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_intersect()函数使用代码
2009/01/14 PHP
解析Ubuntu下crontab命令的用法
2013/06/24 PHP
php实现基于openssl的加密解密方法
2016/09/30 PHP
phpmailer绑定邮箱的实现方法
2016/12/01 PHP
php 截取GBK文档某个位置开始的n个字符方法
2017/03/08 PHP
学习ExtJS Panel常用方法
2009/10/07 Javascript
javascript中拼接HTML字符串的最快、最好的方法
2014/06/07 Javascript
一个JavaScript处理textarea中的字符成每一行实例
2014/09/22 Javascript
使用Ajax与服务器(JSON)通信实例
2016/11/04 Javascript
原生js实现商品放大镜效果
2017/01/12 Javascript
Vue实例简单方法介绍
2017/01/20 Javascript
VUE axios上传图片到七牛的实例代码
2017/07/28 Javascript
详解vue 组件之间使用eventbus传值
2017/10/25 Javascript
redux中间件之redux-thunk的具体使用
2018/04/17 Javascript
微信小程序前端自定义分享的实现方法
2019/06/13 Javascript
Python读取excel中的图片完美解决方法
2018/07/27 Python
WxPython实现无边框界面
2019/11/18 Python
Python脚本去除文件的只读性操作
2020/03/05 Python
Python AutoCAD 系统设置的实现方法
2020/04/01 Python
Python-jenkins模块之folder相关操作介绍
2020/05/12 Python
基于CSS3实现的黑色个性导航菜单效果
2015/09/14 HTML / CSS
使用HTML5拍照示例代码
2013/08/06 HTML / CSS
Html5新标签datalist实现输入框与后台数据库数据的动态匹配
2017/05/18 HTML / CSS
canvas画图被放大且模糊的解决方法
2020/08/11 HTML / CSS
马德里运动鞋商店:Nigra Mercato
2020/02/16 全球购物
Delphi工程师笔试题
2013/09/21 面试题
个人自我鉴定范文
2013/10/04 职场文书
特色蛋糕店创业计划书
2014/01/28 职场文书
企业年会主持词
2014/03/27 职场文书
副总经理任命书
2014/06/05 职场文书
先进班集体申报材料
2014/12/26 职场文书
商场圣诞节活动总结
2015/05/06 职场文书
起诉意见书范文
2015/05/19 职场文书
大学学生会主席竞选稿
2015/11/19 职场文书
《画家和牧童》教学反思
2016/02/17 职场文书
分家协议书范本
2016/03/22 职场文书