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 相关文章推荐
JavaScript设置FieldSet展开与收缩
May 15 Javascript
Javascript 验证上传图片大小[客户端]
Aug 01 Javascript
csdn 论坛技术区平均给分功能
Nov 07 Javascript
javascript倒计时功能实现代码
Jun 07 Javascript
onkeypress字符按键兼容所有浏览器使用介绍
Apr 24 Javascript
js的onload事件及初始化按钮事件示例代码
Sep 25 Javascript
js中数组(Array)的排序(sort)注意事项说明
Jan 24 Javascript
深入理解JavaScript系列(50):Function模式(下篇)
Mar 04 Javascript
jquery判断单选按钮radio是否选中的方法
May 05 Javascript
简介JavaScript中Boolean.toSource()方法的使用
Jun 05 Javascript
jQuery解决$符号命名冲突
Jun 18 Javascript
vue 和vue-touch 实现移动端左右导航效果(仿京东移动站导航)
Apr 22 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新手谈谈我的学习心得
2007/02/25 PHP
php笔记之:AOP的应用
2013/04/24 PHP
PHP获取一年有几周以及每周开始日期和结束日期
2015/08/06 PHP
基于php中echo用逗号和用点号的区别详解
2018/01/23 PHP
javascript之AJAX框架使用说明
2010/04/24 Javascript
使用jQuery加载html页面到指定的div实现方法
2016/07/13 Javascript
学习掌握JavaScript中this的使用技巧
2016/08/29 Javascript
jQuery中常用动画效果函数(日常整理)
2016/09/17 Javascript
各式各样的导航条效果css3结合jquery代码实现
2016/09/17 Javascript
微信小程序 详解Page中data数据操作和函数调用
2017/01/12 Javascript
详解nodejs实现本地上传图片并预览功能(express4.0+)
2017/06/28 NodeJs
一步步教你利用webpack如何搭一个vue脚手架(超详细讲解和注释)
2018/01/08 Javascript
Angular value与ngValue区别详解
2019/11/27 Javascript
深度解读vue-resize的具体用法
2020/07/08 Javascript
vue制作toast组件npm包示例代码
2020/10/29 Javascript
详解Vue.js3.0 组件是如何渲染为DOM的
2020/11/10 Javascript
[01:03:18]DOTA2-DPC中国联赛 正赛 RNG vs Dynasty BO3 第一场 1月29日
2021/03/11 DOTA
Python实现字典的key和values的交换
2015/08/04 Python
rabbitmq(中间消息代理)在python中的使用详解
2017/12/14 Python
[原创]Python入门教程4. 元组基本操作
2018/10/31 Python
Python设计模式之模板方法模式实例详解
2019/01/17 Python
python 自动轨迹绘制的实例代码
2019/07/05 Python
如何写python的配置文件
2020/06/07 Python
Python优秀开源项目Rich源码解析的流程分析
2020/07/06 Python
Python 创建TCP服务器的方法
2020/07/28 Python
佳能加拿大网上商店:Canon eStore Canada
2018/04/04 全球购物
Uber Eats台湾:寻找附近提供送餐服务的餐厅
2018/05/07 全球购物
加拿大拼图大师:Puzzle Master
2020/12/28 全球购物
人力资源管理专业毕业生推荐信
2013/11/07 职场文书
运动会入场词50字
2014/02/20 职场文书
如何写一份好的英文求职信
2014/03/19 职场文书
幼儿园爱国卫生月活动总结
2014/06/30 职场文书
2014年小学重阳节活动策划方案
2014/09/16 职场文书
2016简单的租房合同范本
2016/03/18 职场文书
能让Python提速超40倍的神器Cython详解
2021/06/24 Python