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


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焦点的方法小结
Oct 08 Javascript
jQuery 一个图片切换的插件
Oct 09 Javascript
javascript读写XML实现广告轮换(兼容IE、FF)
Aug 09 Javascript
JavaScript判断前缀、后缀是否是空格的方法
Apr 15 Javascript
浅析函数声明和函数表达式——函数声明的声明提前
May 03 Javascript
jQuery Mobile 和 Kendo UI 的比较
May 05 Javascript
微信开发 使用picker封装省市区三级联动模板
Oct 28 Javascript
jQuery中DOM节点删除之empty与remove
Jan 20 Javascript
JavaScript禁止微信浏览器下拉回弹效果
May 16 Javascript
利用vscode编写vue的简单配置详解
Jun 17 Javascript
JS设计模式之状态模式概念与用法分析
Feb 05 Javascript
JS实现的贪吃蛇游戏案例详解
May 01 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命名空间(Namespace)的使用详解
2013/05/04 PHP
php实现在服务器端调整图片大小的方法
2015/06/16 PHP
Laravel Intervention/image图片处理扩展包的安装、使用与可能遇到的坑详解
2017/11/14 PHP
php实现解析xml并生成sql语句的方法
2018/02/03 PHP
PHP+Oracle本地开发环境搭建方法详解
2019/04/01 PHP
JavaScript 无符号右移赋值操作
2009/04/17 Javascript
最简单的jQuery程序 入门者学习
2009/07/09 Javascript
jquery 锁定弹出层实现代码
2010/02/23 Javascript
Jquery插件之多图片异步上传
2010/10/20 Javascript
理解javascript中的回调函数(callback)
2014/09/02 Javascript
Bootstrap模态对话框的简单使用
2016/04/29 Javascript
Node.js中多进程模块Cluster的介绍与使用
2017/05/27 Javascript
JavaScript反弹动画效果的实现代码
2017/07/13 Javascript
Vue源码解读之Component组件注册的实现
2018/08/24 Javascript
Vue.set()动态的新增与修改数据,触发视图更新的方法
2018/09/15 Javascript
提升node.js中使用redis的性能遇到的问题及解决方法
2018/10/30 Javascript
Vue封装全局过滤器Filters的步骤
2020/09/16 Javascript
[06:21]2014DOTA2国际邀请赛 庆祝VG首阶段领跑;B叔为挣牛排半夜整理情报
2014/07/13 DOTA
[01:10:30]DOTA2-DPC中国联赛正赛 Dragon vs Dynasty BO3 第一场 3月4日
2021/03/11 DOTA
python脚本实现统计日志文件中的ip访问次数代码分享
2014/08/06 Python
python实现从字典中删除元素的方法
2015/05/04 Python
Python函数式编程指南(一):函数式编程概述
2015/06/24 Python
在Python的Django框架中创建和使用模版
2015/07/15 Python
利用 Monkey 命令操作屏幕快速滑动
2016/12/07 Python
使用python编写监听端
2018/04/12 Python
Python3多线程操作简单示例
2018/05/22 Python
Python numpy矩阵处理运算工具用法汇总
2020/07/13 Python
彼得罗夫美国官网:Peter Thomas Roth美国(青瓜面膜)
2017/11/05 全球购物
Juice Beauty官网:有机美容产品,护肤与化妆品
2020/06/13 全球购物
记帐员岗位责任制
2014/02/08 职场文书
同学会主持词
2014/03/18 职场文书
2014年小学教学工作总结
2014/11/13 职场文书
萤火虫之墓观后感
2015/06/05 职场文书
golang 实现菜单树的生成方式
2021/04/28 Golang
如何利用Python实现n*n螺旋矩阵
2022/01/18 Python
Redis特殊数据类型HyperLogLog基数统计算法讲解
2022/06/01 Redis