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


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 相关文章推荐
EasySlider 基于jQuery功能强大简单易用的滑动门插件
Jun 11 Javascript
jquery通过a标签删除table中的一行的代码
Dec 02 Javascript
详解JavaScript中的异常处理方法
Jun 16 Javascript
一道JS前端闭包面试题解析
Dec 25 Javascript
教你一步步用jQyery实现轮播器
Dec 18 Javascript
Kindeditor单独调用多图上传实例
Jul 31 Javascript
使用InstantClick.js让页面提前加载200ms
Sep 12 Javascript
jQuery实现动态控制页面元素的方法分析
Dec 20 jQuery
在Vue中使用Compass的方法
Mar 02 Javascript
讲解vue-router之什么是编程式路由
May 28 Javascript
JavaScript封闭函数及常用内置对象示例
May 13 Javascript
vue项目接口域名动态获取操作
Aug 13 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 empty函数 使用说明
2009/08/10 PHP
php whois查询API制作方法
2011/06/23 PHP
解析php中的fopen()函数用打开文件模式说明
2013/06/20 PHP
解析centos中Apache、php、mysql 默认安装路径
2013/06/25 PHP
php打开文件fopen函数的使用说明
2013/07/05 PHP
PHP中trait使用方法详细介绍
2017/05/21 PHP
php swoft框架实例用法
2020/12/22 PHP
关于JavaScript的一些看法
2009/05/27 Javascript
CSS+Jquery实现页面圆角框方法大全
2009/12/24 Javascript
两种简单实现菜单高亮显示的JS类代码
2010/06/27 Javascript
jQuery插件MixItUp实现动画过滤和排序
2015/04/12 Javascript
JS+CSS实现大气清新的滑动菜单效果代码
2015/10/22 Javascript
理解Angular数据双向绑定
2016/01/10 Javascript
使用bootstrap validator的remote验证代码经验分享(推荐)
2016/09/21 Javascript
详解如何给React-Router添加路由页面切换时的过渡动画
2019/04/25 Javascript
如何基于javascript实现贪吃蛇游戏
2020/02/09 Javascript
vue实现自定义多选按钮
2020/07/16 Javascript
解决vuecli3中img src 的引入问题
2020/08/04 Javascript
vue实现移动端input上传视频、音频
2020/08/18 Javascript
python实现排序算法
2014/02/14 Python
python之wxPython菜单使用详解
2014/09/28 Python
Python使用matplotlib的pie函数绘制饼状图功能示例
2018/01/08 Python
python numpy实现文件存取的示例代码
2019/05/26 Python
微信公众号token验证失败解决方案
2019/07/22 Python
pytorch实现mnist数据集的图像可视化及保存
2020/01/14 Python
Python xmltodict模块安装及代码实例
2020/10/05 Python
python实现马丁策略回测3000只股票的实例代码
2021/01/22 Python
整理HTML5中支持的URL编码与字符编码
2016/02/23 HTML / CSS
Lou & Grey美国官网:主打舒适性面料服饰
2017/12/21 全球购物
美国高端牛仔品牌:Silver Jeans
2019/12/12 全球购物
广州品高软件.net笔面试题目
2012/04/18 面试题
高中生的自我鉴定范文
2014/01/24 职场文书
怎样写好创业计划书的内容
2014/02/06 职场文书
2014乡镇领导班子四风对照检查材料思想汇报
2014/10/05 职场文书
大一新生检讨书
2014/10/29 职场文书
2015年生产部工作总结范文
2015/05/25 职场文书