js之切换全屏和退出全屏实现
应用场景:
比如很多网页游戏全屏之类的,或者是网上看小说等。
核心代码:
//控制全屏
function enterfullscreen() { //进入全屏
$("#fullscreen").html("退出全屏");
var docElm = document.documentElement;
//W3C
if(docElm.requestFullscreen) {
docElm.requestFullscreen();
}
//FireFox
else if(docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
}
//Chrome等
else if(docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
}
//IE11
else if(elem.msRequestFullscreen) {
elem.msRequestFullscreen();
}
} function exitfullscreen() { //退出全屏
$("#fullscreen").html("切换全屏");
if(document.exitFullscreen) {
document.exitFullscreen();
} else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if(document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if(document.msExitFullscreen) {
document.msExitFullscreen();
}
} var a = ;
$('#fullscreen').on('click', function() {
a++;
a % == ? enterfullscreen() : exitfullscreen();
})
前端代码:
<a type="button" id="fullscreen" class="btn btn-default visible-lg visible-md"><i class="fa fa-refresh" aria-hidden="true"></i> 切换全屏</a>
js之切换全屏和退出全屏实现的更多相关文章
- js控制全屏及退出全屏
js控制全屏及退出全屏,网上很多代码例子,我这里需求和标准的有点出入: 1.当用户点击某按钮,触发iframe下的页面全屏. 2.不允许用户退出全屏. 解决第一点,触发全屏可以按照网上的例子,代码如下 ...
- JS实现元素的全屏、退出全屏功能
在实际开发中,我们很可能需要实现某一元素的全屏和退出全屏功能,如canvas.所幸的是,js提供了相关api用来处理这一问题,只需简单的调用requestFullScreen.exitFullScr ...
- div的全屏与退出全屏
div的全屏与退出全屏 作用:将div全屏与退出全屏,一般播放器使用较多. html按钮: <button onclick="showFull();"> 全屏 < ...
- android开发:全屏和退出全屏
android开发:全屏和退出全屏 from://http://blog.csdn.net/dyllove98/article/details/8831933 2013-04-21 20:31 413 ...
- Cordova 设置全屏及退出全屏切换
设置全屏在super.init();之前 最后才退出全屏. 以下为具体代码: package com.agile.ittm; import android.os.Bundle; import andr ...
- js 实现操作浏览器或者元素的全屏与退出全屏功能
<!DOCTYPE html> <html lang="en" id="div1"> <head> <meta cha ...
- Android动态的全屏和退出全屏
转自:http://chroya.iteye.com/blog/974031 让程序全屏的方法,大家都知道,那是静态的,程序运行之初就申明了.但是如果有这样的需求:要在程序运行的过程中,执行了某个操作 ...
- ng2 中的全屏与退出全屏
1.进入全屏 launchFullscreen(element) { if(element.requestFullscreen) { element.requestFullscreen(); } el ...
- 原生js实现浏览器全屏和退出全屏
全屏模式 //W3C if (docElm.requestFullscreen) { docElm.requestFullscreen(); } //FireFox else if (docElm.m ...
随机推荐
- English--五大基本句型基本概念
English|五大基本句型基本概念 英语的基本句型是整个英语的框架体系,所以,祝愿看到此文的伙伴们,都可以牢牢掌握! 前言 目前所有的文章思想格式都是:知识+情感. 知识:对于所有的知识点的描述.力 ...
- ES6的新特性
ECMAScript 6(简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,又称ECMAScript 2015.ES6就是ES2015. 虽然目前并不是所有 ...
- 单词CAEMENT水泥CAEMENT英文
caement Archaic spelling of cement. caement Alternative forms caement (archaic) c?ment (archaic) Hyp ...
- Golang中文乱码问题
在学习golang读取文件的过程中,遇到中文显示乱码的问题!golang没有自带的编解码包,因此需要借助第三方包 解决方法: 引入第三发转码包:git clone https://github.com ...
- springboot设置访问端口和项目路径
找到,application.properties, 添加如下配置即可 server.port=8088server.servlet.context-path=/
- Linux安装在虚拟机上
虚拟机上安装centos7 minimal 详细操作链接:https://blog.csdn.net/babyxue/article/details/80970526 镜像文件 xxx.iso 本质就 ...
- MySQL倒序索引测试2
测试环境 MySQL Community Server 8.0.17 准备测试数据 DROP TABLE TB001; CREATE TABLE TB001(ID INT PRIMARY KEY AU ...
- JVM 整体流程介绍
一. JVM自身的物理结构 从图中可以看出 JVM 的主要组成部分 ClassLoader(类加载器),Runtime Data Area(运行时数据区,内存分区),Execution Engine( ...
- Linux(Redhat)传送门汇总
Linux(Redhat)传送门汇总 linux 环境布置 常用命令与shell 常用命令 shell 环境布置 Linux虚拟机安装(rhel 7.4) 虚拟机网络设置 VMware虚拟机开机启动 ...
- DFS(一):砌墙问题
问题描述 使用两种砖头砌墙,砖头A宽为2,高为1,砖头B宽为3,高为1,用这两种砖头砌一面宽为W,高为H的墙. 为了使墙牢固性高,要求每种砖只能横向摆放,不能竖起来,且除了两侧以外,不能出现上下对齐的 ...