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函数详解
Nov 17 Javascript
node.js中的fs.fchown方法使用说明
Dec 16 Javascript
jquery实现垂直和水平菜单导航栏
Aug 27 Javascript
Javascript 实现放大镜效果实例详解
Dec 03 Javascript
JS验证全角与半角及相互转化的介绍
May 18 Javascript
详解用node.js实现简单的反向代理
Jun 26 Javascript
详解ES6 Symbol 的用途
Oct 14 Javascript
11个教程中不常被提及的JavaScript小技巧(推荐)
Apr 17 Javascript
Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义
Aug 20 Javascript
vue遍历生成的输入框 绑定及修改值示例
Oct 30 Javascript
高性能js数组去重(12种方法,史上最全)
Dec 21 Javascript
Vue全家桶入门基础教程
May 14 Vue.js
使用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
日本因肺炎疫情影响,这几部动漫推延播放!
2020/03/03 日漫
dedecms模版制作使用方法
2007/04/03 PHP
php smarty模版引擎中的缓存应用
2009/12/11 PHP
浅析PKI加密解密 OpenSSL
2013/07/01 PHP
PHP实现根据时间戳获取周几的方法
2016/02/26 PHP
Javascript打印网页部分内容的脚本
2008/11/17 Javascript
JavaScript是否可实现多线程  深入理解JavaScript定时机制
2009/12/22 Javascript
24款非常有用的 jQuery 插件分享
2011/04/06 Javascript
Javascript设置对象的ReadOnly属性(示例代码)
2013/12/25 Javascript
jQuery操作DOM之获取表单控件的值
2015/01/23 Javascript
JS+CSS实现鼠标滑过时动态翻滚的导航条效果
2015/09/24 Javascript
JS和JQuery实现雪花飘落效果
2017/11/30 jQuery
详解vue配置后台接口方式
2019/03/29 Javascript
js实现移动端tab切换时下划线滑动效果
2019/09/08 Javascript
教你如何用Node实现API的转发(某音乐)
2019/09/20 Javascript
基于vue hash模式微信分享#号的解决
2020/09/07 Javascript
js实现石头剪刀布游戏
2020/10/11 Javascript
python3.6连接MySQL和表的创建与删除实例代码
2017/12/28 Python
python实现txt文件格式转换为arff格式
2018/05/31 Python
numpy matrix和array的乘和加实例
2018/06/28 Python
使用Pandas的Series方法绘制图像教程
2019/12/04 Python
Python yield的用法实例分析
2020/03/06 Python
如何用css3实现switch组件开关的方法
2018/02/09 HTML / CSS
H5 meta小结(前端必看篇)
2016/08/24 HTML / CSS
Otticanet意大利:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/03/10 全球购物
应届生体育教师自荐信
2013/10/03 职场文书
总结表彰大会主持词
2014/03/26 职场文书
商场主管竞聘书
2014/03/31 职场文书
学生会竞选演讲稿
2014/04/24 职场文书
学生党员一帮一活动总结
2014/07/08 职场文书
运动会闭幕词
2015/01/28 职场文书
2016领导干部廉洁从政心得体会
2016/01/19 职场文书
导游词之唐山景点
2019/12/18 职场文书
python周期任务调度工具Schedule使用详解
2021/11/23 Python
详解Python中*args和**kwargs的使用
2022/04/07 Python
Sql Server 行数据的某列值想作为字段列显示的方法
2022/04/20 SQL Server