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


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 相关文章推荐
js Flash插入函数免激活代码
Mar 31 Javascript
input 输入框内的输入事件详细分析
Mar 17 Javascript
js控制iframe的高度/宽度让其自适应内容
Apr 09 Javascript
iframe里的页面禁止右键事件的方法
Jun 10 Javascript
JS组件Bootstrap实现弹出框效果代码
Apr 26 Javascript
JavaScript中style.left与offsetLeft的使用及区别详解
Jun 08 Javascript
AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题
Jan 21 Javascript
layer弹窗插件操作方法详解
May 19 Javascript
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
Nov 08 jQuery
AngularJS修改model值时,显示内容不变的实例
Sep 13 Javascript
微信小程序单选radio及多选checkbox按钮用法示例
Apr 30 Javascript
详解React 条件渲染
Jul 08 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
php缓存技术介绍
2006/11/25 PHP
php获取客户端IP及URL的方法示例
2017/02/03 PHP
Yii2框架中一些折磨人的坑
2019/12/15 PHP
javascript contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
2010/02/04 Javascript
JS继承 笔记
2011/07/13 Javascript
JavaScript中json对象和string对象之间相互转化
2012/12/26 Javascript
关于火狐(firefox)及ie下event获取的两种方法
2012/12/27 Javascript
JQuery中SetTimeOut传参问题探讨
2013/05/10 Javascript
jquery $.each() 使用小探
2013/08/23 Javascript
详解Vue中使用Axios拦截器
2019/04/22 Javascript
Js和VUE实现跑马灯效果
2020/05/25 Javascript
vue 避免变量赋值后双向绑定的操作
2020/11/07 Javascript
Node.js文本文件BOM头的去除方法
2020/11/22 Javascript
[46:27]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#2LGD VS MVP.Phx第一局
2016/03/02 DOTA
详尽讲述用Python的Django框架测试驱动开发的教程
2015/04/22 Python
python使用in操作符时元组和数组的区别分析
2015/05/19 Python
Python文本特征抽取与向量化算法学习
2017/12/22 Python
对tf.reduce_sum tensorflow维度上的操作详解
2018/07/26 Python
python将控制台输出保存至文件的方法
2019/01/07 Python
python实现合并多个list及合并多个django QuerySet的方法示例
2019/06/11 Python
如何安装并使用conda指令管理python环境
2019/07/10 Python
python3.7 openpyxl 删除指定一列或者一行的代码
2019/10/08 Python
PyTorch 对应点相乘、矩阵相乘实例
2019/12/27 Python
Python networkx包的实现
2020/02/14 Python
对python pandas中 inplace 参数的理解
2020/06/27 Python
原生canvas制作画图小工具的踩坑和爬坑
2020/06/09 HTML / CSS
英国、欧洲和全球租车服务:Avis英国
2016/08/29 全球购物
世界最大的海报和艺术印刷商店:AllPosters.com
2017/02/01 全球购物
新媒传信软件测试面试题
2013/02/24 面试题
培训主管岗位职责
2014/02/01 职场文书
师范生求职自荐信
2014/06/14 职场文书
学习优秀党员杨宗兴先进事迹材料思想汇报
2014/09/14 职场文书
党的群众路线教育实践活动心得体会(教师)
2014/10/31 职场文书
旗帜观后感
2015/06/08 职场文书
导游词之青岛太清宫
2019/12/13 职场文书
Python使用scapy模块发包收包
2021/05/07 Python