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 ...
随机推荐
- 移动互联网iOS工程师必须知道的三点
如果十年磨一剑,那么现在起作为一名iOS工程师,以下三点你必须要知道: 1.现在开始学swift正是时候,永远不要怕晚 因为…新时代的程序语言Swift有很多优势,长江后浪推前浪,Swift上手快,开 ...
- C# 正则表达式大全(转载)
文章导读 正则表达式的本质是使用一系列特殊字符模式,来表示某一类字符串.正则表达式无疑是处理文本最有力的工具,而.NET提供的Regex类实现了验证正则表达式的方法.Regex 类表示不可变(只读)的 ...
- Python介绍与学习
Python是一种面向对象的解释型计算机程序设计语言,由荷兰人Guido van Rossum于1989年发明,第一个公开发行版发行于1991年. Python是纯粹的自由软件, 源代码和解释器CPy ...
- html css 样式中100%width 仍有白边解决办法
把 <body >改成<body style="margin=0%">
- UVALive-7198 Tall orders 微积分 二分
题目链接:https://cn.vjudge.net/problem/UVALive-7198 题意 有悬链线方程$ f(x)=a \cdot cosh(\frac{s}{a}) $, 现有两个电线杆 ...
- python 进程 multiprocessing模块
一.multiprocess.process模块 1.process类 Process([group [, target [, name [, args [, kwargs]]]]]),由该类实例化得 ...
- iText、poi操作word2007（读取，生成）
关于生成word文件以及插入文字.表格.图片等功能,我使用了poi和itext,因为poi插入图片的jar包我在网上查并不是太完全,也可能我没找到如何使用,所以插入图片我用的是itext iText所 ...
- NoReferencedTableError: Foreign key associated with column ** with which to generate a foreign key to target column 'id'
1.使用 python flask 框架做项目时,在实体类中配置了 映射关系, message: id = db.Column(db.Integer, primary_key=True)message ...
- C/C++ 名正则言顺
本系列文章由 @yhl_leo 出品,转载请注明出处. 文章链接: http://blog.csdn.net/yhl_leo/article/details/50532701 名称所表达的含义极其丰富 ...
- HDU1863_畅通project【Prim】【并查集】
畅通project Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total ...