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


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实现的检测浏览器和系统的函数
Apr 09 Javascript
js静态方法与实例方法分析
Jul 04 Javascript
jQuery中ajax的使用与缓存问题的解决方法
Dec 19 Javascript
js函数在frame中的相互调用详解
Mar 03 Javascript
javascript数组操作(创建、元素删除、数组的拷贝)
Apr 07 Javascript
jquery查找父元素、子元素(个人经验总结)
Apr 09 Javascript
探寻Javascript执行效率问题
Nov 12 Javascript
jquery实现输入框实时输入触发事件代码
Dec 21 Javascript
微信小程序 devtool隐藏的秘密
Jan 21 Javascript
JavaScript创建对象方式总结【工厂模式、构造函数模式、原型模式等】
Dec 19 Javascript
vue.config.js常用配置详解
Nov 14 Javascript
关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version
Oct 17 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+MySQL5.0中文乱码解决方法
2006/11/20 PHP
如何获知PHP程序占用多少内存(memory_get_usage)
2012/09/23 PHP
基于magic_quotes_gpc与magic_quotes_runtime的区别与使用介绍
2013/04/22 PHP
PHP中使用循环实现的金字塔图形
2014/11/08 PHP
详解PHP中的mb_detect_encoding函数使用方法
2015/08/18 PHP
PHP动态地创建属性和方法, 对象的复制, 对象的比较,加载指定的文件,自动加载类文件,命名空间
2016/05/06 PHP
PHP函数按引用传递参数及函数可选参数用法示例
2018/06/04 PHP
HTML-CSS群中单选引发的“事件”
2007/03/05 Javascript
Javascript 继承实现例子
2009/08/12 Javascript
jquery.boxy插件的iframe扩展代码
2010/07/02 Javascript
用jQuery模拟页面加载进度条的实现代码
2011/12/19 Javascript
js获取当月最后一天实例代码
2013/11/19 Javascript
jQuery实现购物车计算价格功能的方法
2015/03/25 Javascript
js实现适用于素材网站的黑色多级菜单导航条效果
2015/08/24 Javascript
浅谈JS原型对象和原型链
2016/03/02 Javascript
javascript实现下雪效果【实例代码】
2016/05/03 Javascript
jQuery.Uploadify插件实现带进度条的批量上传功能
2016/06/08 Javascript
jQuery仿京东商城楼梯式导航定位菜单
2016/07/25 Javascript
switch语句的妙用(必看篇)
2016/10/03 Javascript
canvas绘图不清晰的解决方案
2017/02/28 Javascript
angular 基于ng-messages的表单验证实例
2017/05/04 Javascript
axios发送post请求springMVC接收不到参数的解决方法
2018/03/05 Javascript
Vuejs开发环境搭建及热更新【推荐】
2018/09/07 Javascript
微信小程序使用GoEasy实现websocket实时通讯
2020/05/19 Javascript
python3+django2开发一个简单的人员管理系统过程详解
2019/07/23 Python
python第三方库学习笔记
2020/02/07 Python
python实现简单猜单词游戏
2020/12/24 Python
Python对excel的基本操作方法
2021/02/18 Python
捷克汽车配件和工具销售网站:TorriaCars
2018/02/26 全球购物
公司拓展活动方案
2014/02/13 职场文书
乡村教师党员四风问题对照检查材料思想汇报
2014/10/08 职场文书
解除租房协议书
2014/12/03 职场文书
公务员年度考核个人总结
2015/02/12 职场文书
2016年秋季运动会加油稿
2015/12/21 职场文书
python基于tkinter制作无损音乐下载工具
2021/03/29 Python
html网页引入svg图片的4种方式
2022/08/05 HTML / CSS