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 相关文章推荐
取得父标签
Nov 14 Javascript
jQuery中读取json文件示例代码
May 10 Javascript
js中的scroll和offset 使用比较的实例与分析
Sep 29 Javascript
js、jquery图片动画、动态切换示例代码
Jun 03 Javascript
jQuery+ajax实现鼠标单击修改内容的思路
Jun 29 Javascript
js实现精确到毫秒的倒计时效果
Aug 05 Javascript
jQuery实现圣诞节礼物动画案例解析
Dec 25 Javascript
Angular 4 指令快速入门教程
Jun 07 Javascript
javascript将非数值转换为数值
Sep 13 Javascript
Vue 框架之动态绑定 css 样式实例分析
Nov 14 Javascript
JS div匀速移动动画与变速移动动画代码实例
Mar 26 Javascript
layui form表单提交后实现自动刷新
Oct 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
php遍历目录viewDir函数
2009/12/15 PHP
fleaphp crud操作之find函数的使用方法
2011/04/23 PHP
php设计模式 Strategy(策略模式)
2011/06/26 PHP
PHP 极验验证码实例讲解
2016/09/29 PHP
PHP设计模式之策略模式原理与用法实例分析
2019/04/04 PHP
javascript 函数调用的对象和方法
2010/07/01 Javascript
Jquery EasyUI的添加,修改,删除,查询等基本操作介绍
2013/10/11 Javascript
jquery JSON的解析方式示例介绍
2014/07/27 Javascript
Javascript前端UI框架Kit使用指南之Kitjs简介
2014/11/28 Javascript
jquery实现鼠标拖拽滑动效果来选择数字的方法
2015/05/04 Javascript
jQuery Ajax 上传文件处理方式介绍(推荐)
2016/06/30 Javascript
vue中各组件之间传递数据的方法示例
2017/07/27 Javascript
js使用ajax传值给后台,后台返回字符串处理方法
2018/08/08 Javascript
对vue2.0中.vue文件页面跳转之.$router.push的用法详解
2018/08/24 Javascript
vue单页缓存方案分析及实现
2018/09/25 Javascript
bootstrap tooltips在 angularJS中的使用方法
2019/04/10 Javascript
微信小程序数据统计和错误统计的实现方法
2019/06/26 Javascript
解决layer弹出层中表单不起作用的问题
2019/09/09 Javascript
Vue实现PC端靠边悬浮球的代码
2020/05/09 Javascript
[08:47]2018国际邀请赛 OG战队举杯时刻
2018/08/29 DOTA
Python使用urllib模块的urlopen超时问题解决方法
2014/11/08 Python
python matlibplot绘制多条曲线图
2021/02/19 Python
用Python将mysql数据导出成json的方法
2018/08/21 Python
pyspark操作MongoDB的方法步骤
2019/01/04 Python
Python语言检测模块langid和langdetect的使用实例
2019/02/19 Python
SmartBuyGlasses美国官网:太阳眼镜和眼镜
2017/08/20 全球购物
牵手50台湾:专为黄金岁月的单身人士而设的交友网站
2021/02/18 全球购物
水产养殖学应届生求职信
2013/09/29 职场文书
生物技术研究生自荐信
2013/11/12 职场文书
生产车间班组长岗位职责
2014/01/06 职场文书
两年的个人工作自我评价
2014/01/10 职场文书
买房协议书
2014/04/11 职场文书
项目采购员岗位职责
2014/04/15 职场文书
市委常委会班子党的群众路线教育实践活动整改方案
2014/10/25 职场文书
党校个人总结
2015/03/04 职场文书
2015年八一建军节慰问信
2015/03/23 职场文书