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 相关文章推荐
js类中的公有变量和私有变量
Jul 24 Javascript
js 函数的执行环境和作用域链的深入解析
Nov 01 Javascript
23个超流行的jQuery相册插件整理分享
Apr 25 Javascript
javascript jscroll模拟html元素滚动条
Dec 18 Javascript
js 数据存储和DOM编程
Feb 09 Javascript
JavaScript正则表达式函数总结(常用)
Feb 22 Javascript
实战node静态文件服务器的示例代码
Mar 08 Javascript
vue左右侧联动滚动的实现代码
Jun 06 Javascript
dts文件中删除一个node或属性的操作方法
Aug 05 Javascript
解决Vue中 父子传值 数据丢失问题
Aug 27 Javascript
js实现扫雷源代码
Nov 27 Javascript
html实现随机点名器的示例代码
Apr 02 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
日本十大最佳动漫,全都是二次元的神级作品
2019/10/05 日漫
亚洲咖啡有什么?亚洲咖啡产地介绍 亚洲咖啡有什么特点?
2021/03/05 新手入门
在任意字符集下正常显示网页的方法二(续)
2007/04/01 PHP
PHP判断字符串长度的两种方法很实用
2015/09/22 PHP
PHP获取路径和目录的方法总结【必看篇】
2017/03/04 PHP
用js实现的抽象CSS圆角效果!!
2007/05/03 Javascript
Add Formatted Data to a Spreadsheet
2007/06/12 Javascript
javascript+xml技术实现分页浏览
2008/07/27 Javascript
通过Mootools 1.2来操纵HTML DOM元素
2009/09/15 Javascript
Javascript Math ceil()、floor()、round()三个函数的区别
2010/03/09 Javascript
jquery中eq和get的区别与使用方法
2011/04/14 Javascript
js 窗口抖动示例
2013/09/04 Javascript
js的image onload事件使用遇到的问题
2014/07/15 Javascript
JavaScript实现数字数组正序排列的方法
2015/04/06 Javascript
使用JavaScript刷新网页的方法
2015/06/04 Javascript
JavaScript 浏览器兼容性总结及常用浏览器兼容性分析
2016/03/30 Javascript
vue.js中$set与数组更新方法
2018/03/08 Javascript
基于iview的router常用控制方式
2019/05/30 Javascript
Vue+element+cookie记住密码功能的简单实现方法
2020/09/20 Javascript
原生JS生成指定位数的验证码
2020/10/28 Javascript
[03:55]2014DOTA2国际邀请赛 Fnatic经理采访赢DK在情理之中
2014/07/10 DOTA
[12:21]VICI vs TNC (BO3)
2018/06/07 DOTA
Python换行与不换行的输出实例
2020/02/19 Python
python中sympy库求常微分方程的用法
2020/04/28 Python
pandas.DataFrame.drop_duplicates 用法介绍
2020/07/06 Python
Django serializer优化类视图的实现示例
2020/07/16 Python
伦敦时尚生活的缩影:LN-CC
2017/01/24 全球购物
Mytheresa美国官网:德国知名的女性奢侈品电商
2017/05/27 全球购物
MediaMarkt比利时:欧洲最大电器连锁店
2020/12/21 全球购物
平面设计的岗位职责
2013/11/08 职场文书
婚纱店策划方案
2014/05/22 职场文书
交通事故和解协议书
2014/09/25 职场文书
教师党员自我评价范文
2015/03/04 职场文书
解析mybatis-plus中的resultMap简单使用
2021/11/23 Java/Android
Java实现简单小画板
2022/06/10 Java/Android
Django数据库(SQlite)基本入门使用教程
2022/07/07 Python