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 相关文章推荐
jQuery选择头像并实时显示的代码
Jun 27 Javascript
判断浏览器的javascript版本的代码
Sep 03 Javascript
javascript通过class来获取元素实现代码
Feb 20 Javascript
jquery实现metro效果示例代码
Sep 06 Javascript
jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7
Jun 16 Javascript
JavaScript控制按钮可用或不可用的方法
Apr 03 Javascript
使用JavaScript实现弹出层效果的简单实例
May 31 Javascript
ExtJs异步无法向外传值和赋值的完美解决办法
Jun 14 Javascript
Vue.2.0.5实现Class 与 Style 绑定的实例
Jun 20 Javascript
H5实现仿flash效果的实现代码
Sep 29 Javascript
vue基于element的区间选择组件
Sep 07 Javascript
vue-router的hooks用法详解
Jun 08 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下几个常用的去空、分组、调试数组函数
2009/02/22 PHP
php while循环得到循环次数
2013/10/26 PHP
使用URL传输SESSION信息
2015/07/14 PHP
js tab效果的实现代码
2009/12/26 Javascript
JavaScript中valueOf函数与toString方法深入理解
2012/12/02 Javascript
jQuery设置div一直在页面顶部显示的方法
2013/10/24 Javascript
JSuggest自动匹配下拉框使用方法(示例代码)
2013/12/27 Javascript
jQuery子属性过滤选择器用法分析
2015/02/10 Javascript
简介JavaScript中的setTime()方法的使用
2015/06/11 Javascript
jQuery实现的鼠标滑过弹出放大图片特效
2016/01/08 Javascript
JavaScript表单验证实现代码
2017/05/22 Javascript
详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法
2020/04/07 Javascript
javascript this指向相关问题及改变方法
2020/11/19 Javascript
Python中的pprint折腾记
2015/01/21 Python
python统计字符串中指定字符出现次数的方法
2015/04/04 Python
Python编码类型转换方法详解
2016/07/01 Python
Python全局变量用法实例分析
2016/07/19 Python
详解Python3操作Mongodb简明易懂教程
2017/05/25 Python
Python发送http请求解析返回json的实例
2018/03/26 Python
在Mac上删除自己安装的Python方法
2018/10/29 Python
利用Python查看微信共同好友功能的实现代码
2019/04/24 Python
python远程邮件控制电脑升级版
2019/05/23 Python
opencv python 图像轮廓/检测轮廓/绘制轮廓的方法
2019/07/03 Python
anaconda中更改python版本的方法步骤
2019/07/14 Python
在Python中利用pickle保存变量的实例
2019/12/30 Python
python通过cython加密代码
2020/12/11 Python
Charles & Colvard官网:美国莫桑石品牌
2019/06/05 全球购物
莫斯科珠宝厂官方网站:Miuz
2020/09/19 全球购物
会计学个人自荐信模板
2013/12/13 职场文书
毕业生自荐书
2013/12/18 职场文书
合作经营协议书
2014/04/17 职场文书
中学生秋季运动会广播稿
2014/09/21 职场文书
假期安全教育广播稿
2014/10/04 职场文书
政风行风评议个人心得体会
2014/10/29 职场文书
2015庆祝七一建党节94周年活动总结
2015/03/20 职场文书
600字作文之感受大自然
2019/11/27 职场文书