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


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 相关文章推荐
Chrome中模态对话框showModalDialog返回值问题的解决方法
May 25 Javascript
使用VS开发 Node.js指南
Jan 06 Javascript
详解JavaScript对W3C DOM模版的支持情况
Jun 16 Javascript
js图片翻书效果代码分享
Aug 20 Javascript
jQuery链式操作实例分析
Nov 16 Javascript
Javascript中级语法快速入手
Jul 30 Javascript
js手机号4位显示空格,银行卡每4位显示空格效果
Mar 23 Javascript
基于webpack4搭建的react项目框架的方法
Jun 30 Javascript
vue将单页面改造成多页面应用的方法
Nov 25 Javascript
js正则匹配多个全部数据问题
Dec 20 Javascript
Vue数字输入框组件使用方法详解
Feb 10 Javascript
Vue Router的手写实现方法实现
Mar 02 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/12/06 PHP
深入了解 register_globals (附register_globals=off 网站打不开的解决方法)
2012/06/27 PHP
小谈php正则提取图片地址
2014/03/27 PHP
详解PHP中array_rand函数的使用方法
2016/09/11 PHP
前端开发必须知道的JS之原型和继承
2010/07/06 Javascript
js函数的延迟加载实现代码
2012/10/11 Javascript
在NodeJS中启用ECMAScript 6小结(windos以及Linux)
2014/07/15 NodeJs
javascript 动态创建表格
2015/01/08 Javascript
jQuery入门之层次选择器实例简析
2015/12/11 Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
2016/07/27 Javascript
vuex实现登录状态的存储,未登录状态不允许浏览的方法
2018/03/09 Javascript
最后说说Vue2 SSR 的 Cookies 问题
2018/05/25 Javascript
微信小程序实现跑马灯效果
2020/10/21 Javascript
微信小程序搜索功能(附:小程序前端+PHP后端)
2019/02/28 Javascript
JS数组Object.keys()方法的使用示例
2019/06/05 Javascript
vue-cli随机生成port源码的方法
2019/09/02 Javascript
JavaScript Array对象基本方法详解
2019/09/03 Javascript
原生js实现下拉选项卡
2019/11/27 Javascript
[05:01]3.19DOTA2发布会 我们都是刀塔人
2014/03/25 DOTA
python端口扫描系统实现方法
2014/11/19 Python
Python随机生成数据后插入到PostgreSQL
2016/07/28 Python
查看TensorFlow checkpoint文件中的变量名和对应值方法
2018/06/14 Python
深入浅析Python2.x和3.x版本的主要区别
2018/11/30 Python
pandas每次多Sheet写入文件的方法
2018/12/10 Python
python文本数据处理学习笔记详解
2019/06/17 Python
python实现邮件发送功能
2019/08/10 Python
Pycharm 字体大小调整设置的方法实现
2019/09/27 Python
python flask搭建web应用教程
2019/11/19 Python
基于Django实现日志记录报错信息
2019/12/17 Python
python批量替换文件名中的共同字符实例
2020/03/05 Python
Tensorflow之MNIST CNN实现并保存、加载模型
2020/06/17 Python
Web前端页面跳转并取到值
2017/04/24 HTML / CSS
拉斯维加斯城市观光通行证:Las Vegas Pass
2019/05/21 全球购物
大学生职业生涯规划书范文
2014/01/14 职场文书
会计核算科岗位职责
2014/03/19 职场文书
nginx部署多前端项目的几种方法
2021/05/25 Servers