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 相关文章推荐
WebGame《逆转裁判》完整版 代码下载(1月24日更新)
Jan 29 Javascript
List Installed Hot Fixes
Jun 12 Javascript
解javascript 混淆加密收藏
Jan 16 Javascript
Jquery+WebService 校验账号是否已被注册的代码
Jul 12 Javascript
关于js获取radio和select的属性并控制的代码
May 12 Javascript
一个JavaScript防止表单重复提交的实例
Oct 21 Javascript
跟我学习JScript的Bug与内存管理
Nov 18 Javascript
jQuery实现TAB选项卡切换特效简单演示
Mar 04 Javascript
jQuery实现漂亮实用的商品图片tips提示框效果(无图片箭头+阴影)
Apr 16 Javascript
基于JS代码实现导航条弹出式悬浮菜单
Jun 17 Javascript
JS 全屏和退出全屏详解及实例代码
Nov 07 Javascript
webpack+express实现文件精确缓存的示例代码
Jun 11 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
php读取文件内容至字符串中,同时去除换行、空行、行首行尾空格(Zjmainstay原创)
2012/07/31 PHP
PHPer 需要了解的 5 个 Composer 小技巧
2014/08/18 PHP
thinkphp获取栏目和文章当前位置的方法
2014/10/29 PHP
PHP数据库操作Helper类完整实例
2016/05/11 PHP
PHP的curl函数的用法总结
2019/02/14 PHP
TP5框架安全机制实例分析
2020/04/05 PHP
Jquery数独游戏解析(一)-页面布局
2010/11/05 Javascript
JS实现点击链接取消跳转效果的方法
2014/01/24 Javascript
Select标签下拉列表二级联动级联实例代码
2014/02/07 Javascript
js无刷新操作table的行和列
2014/03/27 Javascript
将页面table内容与样式另存成excel文件的方法
2015/08/05 Javascript
基于BootStrap Metronic开发框架经验小结【七】数据的导入、导出及附件的查看处理
2016/05/12 Javascript
JavaScript常用内置对象用法分析
2019/07/09 Javascript
微信小程序 腾讯地图显示偏差问题解决
2019/07/27 Javascript
Emberjs 通过 axios 下载文件的方法
2019/09/03 Javascript
[00:32]DOTA2上海特级锦标赛 Ehome战队宣传片
2016/03/03 DOTA
[01:21:36]CHAOS vs Alliacne 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python中的字典遍历备忘
2015/01/17 Python
python实现抖音点赞功能
2019/04/07 Python
python基于paramiko将文件上传到服务器代码实现
2019/07/08 Python
python 三种方法实现对Excel表格的读写
2020/11/19 Python
Superdry瑞典官网:英国日本街头风品牌
2017/05/17 全球购物
美国杰西潘尼官网:JCPenney
2019/06/12 全球购物
英国办公家具网站:Furniture At Work
2019/10/07 全球购物
全民健身日活动方案
2014/01/29 职场文书
安全协议书
2014/04/23 职场文书
质量管理标语
2014/06/12 职场文书
三八妇女节趣味活动方案
2014/08/23 职场文书
医生爱岗敬业演讲稿
2014/08/26 职场文书
查摆问题对照检查材料
2014/08/28 职场文书
捐助倡议书
2015/01/19 职场文书
幸福终点站观后感
2015/06/04 职场文书
有关西游记的读书笔记
2015/06/25 职场文书
人代会简报
2015/07/21 职场文书
2016年小学生新年寄语
2015/08/18 职场文书
世界十大动漫制作公司排行榜,迪士尼上榜,第二是美国代表性文化符
2022/03/18 欧美动漫