js指定区域全屏
<html>
<head>
<title>js指定区域全屏</title>
<style>
#fulldiv {
background: #fff;
width: 100%;
text-align: center;
height: 100%;
}
</style>
</head>
<body>
<h1>指定区域全屏测试</h1>
<button id="btn">全屏按钮</button>
<div id="content-main">
<img src="C:\Users\guobin\Desktop\IMG_3163.PNG" />
</div>
</body>
<script>
var fullscreen = false;
let btn = document.getElementById('btn');
let fullarea = document.getElementById('content-main')
btn.addEventListener('click',function(){
if (fullscreen) { // 退出全屏
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
} else { // 进入全屏
if (fullarea.requestFullscreen) {
fullarea.requestFullscreen();
} else if (fullarea.webkitRequestFullScreen) {
fullarea.webkitRequestFullScreen();
} else if (fullarea.mozRequestFullScreen) {
fullarea.mozRequestFullScreen();
} else if (fullarea.msRequestFullscreen) {
// IE11
fullarea.msRequestFullscreen();
}
}
fullscreen = !fullscreen;
})
</script>
</html>
js指定区域全屏的更多相关文章
- 仿新浪游戏频道js多栏目全屏下拉菜单导航条
仿新浪游戏频道js多栏目全屏下拉菜单导航条,新浪,游戏频道,js组件,多栏目,全屏下拉,下拉菜单,导航条.代码下载地址:http://www.huiyi8.com/sc/26765.html更多请访问 ...
- js设置页面全屏
html代码 <!-- 全屏按钮 --> <img id="alarm-fullscreen-toggler" src="/public/index/i ...
- 纯C#实现屏幕指定区域截屏
以前在别的地方见过一个通过调用系统API实现屏幕截图的例子,从内心来说我不太喜欢在C#代码中出现这种情况,现在什么都讲“和谐”,我觉得这种做法就是破坏了我们的“和谐”代码,呵呵,开玩笑,有的时候,不通 ...
- FullPage.js – 轻松实现全屏滚动（单页网站）效果
FullPage.js 是一个简单而易于使用的插件,用来创建全屏滚动网站(也被称为单页网站).除了可以创建全屏滚动效果以外,也可以给网站添加一些水平的滑块效果.能够自适应不同的屏幕尺寸,包括平板电脑和 ...
- 《fullPage.js》创建全屏滚动的网站
插件介绍 fullPage.js是一个简单易用的插件,创建全屏滚动的网站(也被称为单页网站).它允许全屏滚动创建网站,以及添加内部滑块. 浏览器兼容性 主要功能 支持鼠标滚动 支持前进后退和键盘控制 ...
- H5中用js让页面全屏
概述 意外的发现一个网页有一个按钮能使网页全屏,查了下代码发现是H5的全屏api,于是就查了下资料,记录下来供以后开发时参考,相信对其他人也有用. 参考资料: 利用js如何做到让页面全屏和不全屏功能 ...
- js控制浏览器全屏
HTML 5中的full screen,目前可以在除IE和opera外的浏览器中使用 ,有的时候用来做全屏API,游戏呀,等都很有用.先看常见的API element.requestFullScree ...
- 学习笔记： js插件 —— fullPage.js （页面全屏滚动）
fullPage.js (页面全屏滚动) 必须依赖 jquery-ui.min.js, 233K 14760个星. 以后有时间再看. API挺全 https://github.com/alvaro ...
- HTML5 JS 实现浏览器全屏(F11的效果)
项目中有需要使用JS来控制浏览器全屏的方法 DEMO地址: http://zhongxia245.github.io/demo/js2fullpanel.html function fullScree ...
随机推荐
- 关于flex布局中的兼容性问题
这几天在做项目中用到了flex布局,但是在测试的过程中发现他的兼容性实在是太差了,仅仅用到水平和垂直居中的样式,没想到兼容性代码就写了好几行. display:flex; display:-webki ...
- Java NIO（二）缓冲区
概念 缓冲区:一个用于特定基本数据类型的容器,由java.nio包定义的所有缓冲区都是Buffer抽象类的子类.其作用于与NIO的通道进行交互,数据从通道读入缓冲区,数据从缓冲区写入通道 Buffer ...
- hdu 3572 Task Schedule【 最大流 】
求出最大流,再判断是否满流 先不理解为什么要这样建图 后来看了这一篇题解 http://blog.csdn.net/u012350533/article/details/12361003 把0看做源点 ...
- runloop的source
以上是完整的 CFRunLoop 和 CFRunLoopMode 的结构体源码(太长了我的妈,用不着看完),下面我精简一下,把重要的留下,看如下代码(可以仔细看一下,加深印象): 上面是精简出来比较关 ...
- “双十二”年终盛典,Guitar Pro邀您一起倾情共舞
躲过了双十一,躲不过双十二,隐约昨天还是双十一,马上双十二又叕来了,弱弱的问一句“你们的手长粗了来了吗?”在这即将结束的年终盛典里,各商家又将如“双十一”般纷纷使出浑身解数,作为吉他最佳拍档的编曲软件 ...
- 路飞学城Python-Day22
- fullcalendar日历插件
https://www.helloweba.net/javascript/231.html
- 浅谈自底向上的Shell脚本编程及效率优化
作者:沐星晨 出处:http://blog.csdn.net/sosodream/article/details/6276758 浅谈自底向上的Shell脚本编程及效率优化 小论文,大家多批评指导:) ...
- Hdu 1429 胜利大逃亡（续） （bfs+状态压缩）
这道题的钥匙只有10个,可以压成二进制 这里有有句非常关键的话 (k & door[x][y]) == door[x][y] 一开始以为只要(k & door[x][y]) ==1就可 ...
- SpringBoot2.0 监听器ApplicationListener的使用-监听ApplicationReadyEvent事件
参考:http://www.shareniu.com/article/73.htm 一.需求是想将我的写一个方法能在项目启动后就运行,之前使用了redis的消息监听器,感觉可以照着监听器这个思路做,于 ...