元素全屏的设置与监听实例


Posted in Javascript onNovember 28, 2017

设置全屏和退出全屏

//全屏设置
 $('#fullScreen').on('click', function () {
  fullScreen();
 });
 //退出全屏
 $('#exitFullScreen').on('click', function () {
  exitFullScreen();
 });
 //进入全屏
function fullScreen() {
 var obj = document.getElementById('editMark');
 if (obj.requestFullScreen) {
  obj.requestFullScreen();
 } else if (obj.webkitRequestFullScreen) {
  obj.webkitRequestFullScreen();
 } else if (obj.msRequestFullScreen) {
  obj.msRequestFullScreen();
 } else if (obj.mozRequestFullScreen) {
  obj.mozRequestFullScreen();
 }
}

function exitFullScreen() {
 var obj = document.getElementById('editMark');
 if (document.exitFullscree) {
  document.exitFullscree();
 } else if (document.webkitExitFullscreen) {
  document.webkitExitFullscreen();
 } else if (document.msExitFullscreen) {
  document.msExitFullscreen();
 } else if (document.mozCancelFullScreen) {
  document.mozCancelFullScreen();
 }
}

监听全屏事件

//监听全屏
 document.addEventListener('fullscreenchange', function () {
  if (document.fullscreenElement) {
   alert(1);
  } else {
   alert(2);
  }
 }, false);
 document.addEventListener('msfullscreenchange', function () {
  if (document.msFullscreenElement) {
   alert(1);
  } else {
   alert(2);
  }
 }, false);
 document.addEventListener('mozfullscreenchange', function () {
  if (document.mozFullScreen) {
   alert(1);
  } else {
   alert(2);
  }
 }, false);
 document.addEventListener('webkitfullscreenchange', function () {
  if (document.webkitIsFullScreen) {
   alert(1);
  } else {
    alert(2);
  }
 }, false);

以上这篇元素全屏的设置与监听实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript中的new的使用方法与注意事项
May 16 Javascript
JavaScript高级程序设计 阅读笔记(二十一) JavaScript中的XML
Sep 14 Javascript
jQuery Mobile的loading对话框显示/隐藏方法分享
Nov 26 Javascript
用jquery模仿的a的title属性的例子
Oct 22 Javascript
AngularJS Controller作用域
Jan 09 Javascript
JS库 Highlightjs 添加代码行号的实现代码
Sep 13 Javascript
浅谈react-native热更新react-native-pushy集成遇到的问题
Sep 30 Javascript
基于Vue 2.0的模块化前端 UI 组件库小结
Dec 21 Javascript
@angular前端项目代码优化之构建Api Tree的方法
Dec 24 Javascript
Vue注册组件命名时不能用大写的原因浅析
Apr 25 Javascript
bootstrap datepicker的基本使用教程
Jul 09 Javascript
JavaScript实现点击切换验证码及校验
Jan 10 Javascript
vue2实现数据请求显示loading图
Nov 28 #Javascript
Vue2仿淘宝实现省市区三级联动
Apr 15 #Javascript
ligerUI---ListBox(列表框可移动的实例)
Nov 28 #Javascript
基于vue2实现上拉加载功能
Nov 28 #Javascript
微信小程序模板和模块化用法实例分析
Nov 28 #Javascript
基于Vue的移动端图片裁剪组件功能
Nov 28 #Javascript
javaScript canvas实现(画笔大小 颜色 橡皮的实例)
Nov 28 #Javascript
You might like
基于OpenCV的PHP图像人脸识别技术
2009/10/11 PHP
php使用GeoIP库实例
2014/06/27 PHP
php运行时动态创建函数的方法
2015/03/16 PHP
PHP中使用curl入门教程
2015/07/02 PHP
thinkPHP框架实现多表查询的方法
2018/06/14 PHP
11款基于Javascript的文件管理器
2009/10/25 Javascript
JQuery 1.3.2以上版本中出现pareseerror错误的解决方法
2011/01/11 Javascript
JavaScript高级程序设计阅读笔记(六) ECMAScript中的运算符(二)
2012/02/27 Javascript
JS获取鼠标坐标的实例方法
2013/07/18 Javascript
探讨JavaScript中的Rest参数和参数默认值
2015/07/29 Javascript
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
2015/10/09 Javascript
JavaScript事件学习小结(一)事件流
2016/06/09 Javascript
Bootstrap学习笔记之js组件(4)
2016/06/12 Javascript
JavaScript函数节流概念与用法实例详解
2016/06/20 Javascript
详细讲解vue2+vuex+axios
2017/05/27 Javascript
vuex中使用对象展开运算符的示例
2017/09/25 Javascript
Angularjs中date过滤器失效的问题及解决方法
2018/07/06 Javascript
javascript中的相等操作符(==与===区别)
2019/12/21 Javascript
Python使用PDFMiner解析PDF代码实例
2017/03/27 Python
Python 爬虫之超链接 url中含有中文出错及解决办法
2017/08/03 Python
python基本语法练习实例
2017/09/19 Python
用十张图详解TensorFlow数据读取机制(附代码)
2018/02/06 Python
Python/ArcPy遍历指定目录中的MDB文件方法
2018/10/27 Python
python3.7将代码打包成exe程序并添加图标的方法
2019/10/11 Python
parser.add_argument中的action使用
2020/04/20 Python
浅谈keras 的抽象后端(from keras import backend as K)
2020/06/16 Python
open_basedir restriction in effect. 原因与解决方法
2021/03/14 PHP
水果连锁超市创业计划书
2014/01/24 职场文书
保护环境倡议书范文
2014/05/13 职场文书
小学数学教学经验交流材料
2014/05/22 职场文书
文秘自荐信
2014/06/28 职场文书
学校关爱留守儿童活动方案
2014/08/27 职场文书
劳动争议和解协议书范本
2014/11/20 职场文书
国情备忘录观后感
2015/06/04 职场文书
Python语言规范之Pylint的详细用法
2021/06/24 Python
《金肉人》米特&《航海王》阿鹤声优松岛实因胰脏癌去世 享寿81岁
2022/04/13 日漫