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


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 无符号右移赋值操作
Apr 17 Javascript
javascript 传统事件模型构造的事件监听器实现代码
May 31 Javascript
jQuery基于当前元素进行下一步的遍历
May 20 Javascript
JavaScript中的substr()方法使用详解
Jun 06 Javascript
chrome下判断点击input上标签还是其余标签的实现方法
Sep 18 Javascript
Javascript vue.js表格分页,ajax异步加载数据
Oct 24 Javascript
Jquery实现跨域异步上传文件总结
Feb 03 Javascript
基于node打包可执行文件工具_Pkg使用心得分享
Jan 24 Javascript
webpack 单独打包指定JS文件的方法
Feb 22 Javascript
关于Vue的路由权限管理的示例代码
Mar 06 Javascript
React组件重构之嵌套+继承及高阶组件详解
Jul 19 Javascript
javascript中可能用得到的全部的排序算法
Mar 05 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
各种战术和打法的原创者
2020/03/04 星际争霸
利用递归把多维数组转为一维数组的函数
2006/10/09 PHP
有关JSON以及JSON在PHP中的应用
2010/04/09 PHP
浅谈discuz密码加密的方式
2014/05/22 PHP
php mongodb操作类 带几个简单的例子
2016/08/25 PHP
php查看一个变量的占用内存的实例代码
2020/03/29 PHP
关于this和self的使用说明
2010/08/01 Javascript
jQuery遍历json中多个map的方法
2015/02/12 Javascript
基于jquery实现select选择框内容左右移动添加删除代码分享
2015/08/25 Javascript
js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
2015/08/31 Javascript
详解jQuery移动页面开发中的ui-grid网格布局使用
2015/12/03 Javascript
利用jQuery实现WordPress中@的ID悬浮显示评论内容
2015/12/11 Javascript
JS 面向对象之继承---多种组合继承详解
2016/07/10 Javascript
Vue2.0子同级组件之间数据交互方法
2018/02/28 Javascript
JS解析后台返回的JSON格式数据实例
2018/08/06 Javascript
微信小程序视图容器(swiper)组件创建轮播图
2020/06/19 Javascript
vue-cli3 DllPlugin 提取公用库的方法
2019/04/24 Javascript
pycharm 使用心得(三)Hello world!
2014/06/05 Python
Python随机生成带特殊字符的密码
2016/03/02 Python
Ubuntu 下 vim 搭建python 环境 配置
2017/06/12 Python
django如何连接已存在数据的数据库
2018/08/14 Python
Pycharm最常用的快捷键及使用技巧
2020/03/05 Python
Python图像阈值化处理及算法比对实例解析
2020/06/19 Python
Python实现图片查找轮廓、多边形拟合、最小外接矩形代码
2020/07/14 Python
用友笔试题目
2016/10/25 面试题
生产副总岗位职责
2013/11/28 职场文书
校园安全广播稿
2014/02/08 职场文书
婚前财产公证书
2014/04/10 职场文书
思想作风建设心得体会
2014/10/22 职场文书
预备党员2014年第四季度思想汇报范文
2014/10/25 职场文书
业务员岗位职责
2015/02/03 职场文书
酒店员工辞职信范文
2015/02/28 职场文书
聘任书范文大全
2015/09/21 职场文书
六五普法心得体会2016
2016/01/21 职场文书
在Windows下安装配置CPU版的PyTorch的方法
2021/04/02 Python
goland 恢复已更改文件的操作
2021/04/28 Golang