当前位置:首页 > 日记 > 正文

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

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

设置全屏和退出全屏

//全屏设置 $('#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);

以上这篇元素全屏的设置与监听实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

相关文章

一个有意思的鼠标点击文字特效jque

一个有意思的鼠标点击文字特效jque

鼠标点击,有意思,代码,文字特效,电脑软件,今天在【幻想's Blog】看到一段比较喜欢的鼠标点击文字特效JS代码,感觉很不错就用到博客上来了!喜欢的站长也可以用一下感觉一下!只需将如下JS代码放到</body>之前即可。<script type="text/javascr…

Photoshop合成创意风格的圣诞节狂

Photoshop合成创意风格的圣诞节狂

教程,创意,圣诞节,海报,狂欢夜,本教程主要使用Photoshop合成圣诞节狂欢夜活动海报教程,整体的海报都是用素材一起合成完成的,喜欢的朋友一起来学习吧。12 阅读全文教程结束,以上就是Photoshop合成创意风格的圣诞节狂欢夜活动海报教程,怎么样,大…

详解Angularjs 如何自定义Img的ng-

详解Angularjs 如何自定义Img的ng-

事件,自定义,详解,电脑软件,Angularjs,在使用AngularJs的过程中,我们常常会用到一些ng-事件,如ng-click、ng-change等,这些事件都是AngularJs事先为我们定义好的。也有的情况下,我们会用到一些使用频率不高的dom事件,如img的onload(图片加载完成…

如何使用Bootstrap 按钮实例详解

如何使用Bootstrap 按钮实例详解

如何使用,详解,实例,按钮,电脑软件,Bootstrap 按钮本章将通过实例讲解如何使用 Bootstrap 按钮。任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观。但是 Bootstrap 提供了一些选项来定义按钮的样式,具体如下表所示:以下样式可用于…

在React中如何优雅的处理事件响应

在React中如何优雅的处理事件响应

事件响应,详解,优雅,电脑软件,React,前言本文主要给大家介绍的是关于React处理事件响应的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍吧。React中定义一个组件,可以通过React.createClass或者ES6的class。本文讨论的React组件…

Photoshop合成北欧小户型沙发摆放

Photoshop合成北欧小户型沙发摆放

动态,北欧,小户型,场景,电脑软件,本篇文章如何分析打造风格沙发情景案例技巧分享,在家装效果图上的效果很不错的说,喜欢的朋友一起来学习吧,学习一下设计的思路,可惜的是作者没有给素材,大家可以自己百度动手找找看吧。12 阅读全文教程结束,以上…

ASP.NET防止SQL注入的方法示例

ASP.NET防止SQL注入的方法示例

方法,示例,电脑软件,ASP,NET,本文实例讲述了ASP.NET防止SQL注入的方法。分享给大家供大家参考,具体如下:最近接手别人一个项目,发现存在SQL注入漏洞,因为不想改太多代码,所以那种参数法防注入呢我就用不着了。只能用传统的笨一点的办法了。1、新…

99%的程序员都会收藏的书单 你读过

99%的程序员都会收藏的书单 你读过

都会,书单,读过,程序员,几本,人丑就要多读书,颜值不够知识来凑,至少你可以用书籍来武装你的大脑,拯救你的人生。TIOBE编程语言排行榜前20的语言入门书籍推荐 01 顶级程序员必备书籍,雷军都点赞的书单!(点击这里,查看原文)拿到了一份雷军点赞的程序…

原生js获取left值和top值的三种方

原生js获取left值和top值的三种方

方法,原生,三种,电脑软件,top,在用js做动态效果时,通常需要获取元素绝对定位中的left和top属性值。比如做一个碰撞广告,就要不停的获取元素的top和left属性值。需要注意的事:取值的元素必须要设置position:absolute绝对定位属性,才能取的到left…

浅谈JavaScript中的属性:如何遍历

浅谈JavaScript中的属性:如何遍历

属性,遍历,浅谈,电脑软件,JavaScript,在JavaScript中,遍历一个对象的属性往往没有在其他语言中遍历一个哈希(有些语言称为字典)的键那么简单。这主要有两个方面的原因:一个是,JavaScript中的对象通常都处在某个原型链中,它会从一个或多个的上…

Photoshop 玻璃图标按钮

Photoshop 玻璃图标按钮

图标,玻璃,电脑软件,按钮,按钮图标,最终效果图1、新建文档,使用圆角矩形工具Alt键绘制一个圆角正方形,然后使用渐变工具设置下面两种颜色进行填充,该图层命名为:icon-bg ,效果如下图: 2、复制图层,命名为glass,改变填充为白色填充,透明度为50%,使用矩…

PS CS5怎么制作个性的课程表?

PS CS5怎么制作个性的课程表?

课程表,个性,电脑软件,PS,新的学期才刚开始,又有新的课程了,那么怎么用photoshop做一个带有背景的有自己特色的课程表呢?软件名称:Photoshop CS5 绿色版官方中文正式原版软件大小:104.06MB更新时间:2014-06-011、首先打开excel,建立一个课程表。因…