js之切换全屏和退出全屏实现代码实例


Posted in Javascript onSeptember 09, 2019

这篇文章主要介绍了js之切换全屏和退出全屏实现代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

应用场景:

比如很多网页游戏全屏之类的,或者是网上看小说等。

核心代码:

//控制全屏
function enterfullscreen() { //进入全屏
  $("#fullscreen").html("退出全屏");
  var docElm = document.documentElement;
  //W3C
  if(docElm.requestFullscreen) {
    docElm.requestFullscreen();
  }
  //FireFox
  else if(docElm.mozRequestFullScreen) {
    docElm.mozRequestFullScreen();
  }
  //Chrome等
  else if(docElm.webkitRequestFullScreen) {
    docElm.webkitRequestFullScreen();
  }
  //IE11
  else if(elem.msRequestFullscreen) {
    elem.msRequestFullscreen();
  }
}

function exitfullscreen() { //退出全屏
  $("#fullscreen").html("切换全屏");
  if(document.exitFullscreen) {
    document.exitFullscreen();
  } else if(document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if(document.webkitCancelFullScreen) {
    document.webkitCancelFullScreen();
  } else if(document.msExitFullscreen) {
    document.msExitFullscreen();
  }
}

var a = 0;
$('#fullscreen').on('click', function() {
  a++;
  a % 2 == 1 ? enterfullscreen() : exitfullscreen();
})

前端代码:

<a type="button" id="fullscreen" class="btn btn-default visible-lg visible-md"><i class="fa fa-refresh" aria-hidden="true"></i> 切换全屏</a>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Opacity.js
Jan 22 Javascript
JS 去前后空格大全(IE9亲测)
Jul 15 Javascript
JS获取iframe中longdesc属性的方法
Apr 01 Javascript
javascript去除空格方法小结
May 21 Javascript
jQuery实现日期联动效果实例
Jul 26 Javascript
jQuery简单倒计时效果完整示例
Sep 20 Javascript
使用bootstrap插件实现模态框效果
May 10 Javascript
详解JS中的柯里化(currying)
Aug 17 Javascript
JS实现匀加速与匀减速运动的方法示例
Sep 04 Javascript
基于匀速运动的实例讲解(侧边栏,淡入淡出)
Oct 17 Javascript
[原创]微信小程序获取网络类型的方法示例
Mar 01 Javascript
Vue开发之封装上传文件组件与用法示例
Apr 25 Javascript
使用Easyui实现查询条件的后端传递并自动刷新表格的两种方法
Sep 09 #Javascript
一次微信小程序内地图的使用实战记录
Sep 09 #Javascript
微信小程序HTTP请求从0到1封装
Sep 09 #Javascript
JS回调函数 callback的理解与使用案例分析
Sep 09 #Javascript
世界上最短的数字判断js代码
Sep 09 #Javascript
JavaScript中判断为整数的多种方式及保留两位小数的方法
Sep 09 #Javascript
javascript删除数组元素的七个方法示例
Sep 09 #Javascript
You might like
第1次亲密接触PHP5(2)
2006/10/09 PHP
解决了Ajax、MySQL 和 Zend Framework 的乱码问题
2009/03/03 PHP
深入探讨:PHP使用数据库永久连接方式操作MySQL的是与非
2013/06/05 PHP
PHP提示Warning:phpinfo() has been disabled函数禁用的解决方法
2014/12/17 PHP
PHP使用glob方法遍历文件夹下所有文件的实例
2018/10/17 PHP
php多进程并发编程防止出现僵尸进程的方法分析
2020/02/28 PHP
tp5.1 框架查询表达式用法详解
2020/05/25 PHP
JS弹出窗口的运用与技巧大全
2016/11/01 Javascript
JavaScript面向对象分层思维全面解析
2016/11/22 Javascript
折叠菜单及选择器的运用
2017/02/03 Javascript
使用prop解决一个checkbox选中后再次选中失效的问题
2017/07/05 Javascript
JS判断微信扫码的方法
2017/08/07 Javascript
基于node.js之调试器详解
2017/08/22 Javascript
Node.js文件编码格式的转换的方法
2018/04/27 Javascript
vue中的计算属性实例详解
2018/09/19 Javascript
JS中通过url动态获取图片大小的方法小结(两种方法)
2018/10/31 Javascript
vue.js指令v-for使用以及下标索引的获取
2019/01/31 Javascript
vue 实现微信浮标效果
2019/09/01 Javascript
使用VScode 插件debugger for chrome 调试react源码的方法
2019/09/13 Javascript
vue接通后端api以及部署到服务器操作
2020/08/13 Javascript
wxPython使用系统剪切板的方法
2015/06/16 Python
python实现中文分词FMM算法实例
2015/07/10 Python
tensorflow构建BP神经网络的方法
2018/03/12 Python
python3+PyQt5使用数据库窗口视图
2018/04/24 Python
python训练数据时打乱训练数据与标签的两种方法小结
2018/11/08 Python
python2和python3在处理字符串上的区别详解
2019/05/29 Python
Python OpenCV实现鼠标画框效果
2020/08/19 Python
Python常用模块os.path之文件及路径操作方法
2019/12/03 Python
Python如何实现Paramiko的二次封装
2021/01/30 Python
高三毕业生自我鉴定
2013/12/20 职场文书
幼儿园保教管理制度
2014/02/03 职场文书
校园安全检查制度
2014/02/03 职场文书
音乐专业自荐信
2014/02/07 职场文书
要账委托书范本
2014/09/15 职场文书
关于观后感的作文
2015/06/18 职场文书
pandas中DataFrame检测重复值的实现
2021/05/26 Python