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 ...
随机推荐
- heavy dark--读《《暗时间》》
本书名为<<暗时间>>,个人觉得是一个非常好的名字:1.迷茫的大学生有多少的业余时间,但又浪费多少的业余时间,浪费的这莫多时间就如同人在黑夜中一样,大脑是在休息的状态.这是第一 ...
- baidu练习/html/css
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- jq点击按钮打开和关闭弹出层,点击除了当前按钮以外的地方关闭弹出层
1.html <a id="more" onclick="moreFun()">更多</a> <ul id="moreL ...
- [置顶]
Elon Musk (伊隆·马斯克):无限的创想与意志的胜利
Elon Musk (伊隆·马斯克):无限的创想与意志的胜利 很多人说 Steve Jobs 很伟大,这一点我认同.但是,单纯从创造出的产物而言,Elon Musk 的成就毫无疑问远远超越 Steve ...
- ELK搭建和部署-----(上半部分)
本实验基于centos7安装部署操作步骤如下: 1.首先准备两台centos7系统,IP地址自行定义. 2.先在服务器上安装时间同步中间件为chronyc 3.并启动命令为systemctl star ...
- zabbix_get 获取agnet端mysql数据失败
问题 在使用zabbix_get获取agent端的mysql数据时,总是报错,ERROR 2002 (HY000): Can't connect to local MySQL server throu ...
- linux下wps的字体缺失解决方法
可以参考Mr.Liang 说明:当安装好wps for linux,然后打开wps会提示字体缺失,可做如下操作: 1.下载wps缺失字体(资源侵权联系我删除) 2.解压 unzip -d ./wps_ ...
- 查看系统进程:ps、top
1.ps命令:提供最近进程的快照.显示当前活跃进程的简要信息. 常见使用: (1)与grep命令配合查找是否有相应进程存活 ps -ef | grep ksmd ps -Af | grep ksmd ...
- 论文阅读笔记“Attention-based Audio-Visual Fusion for Rubust Automatic Speech recognition”
关于论文的阅读笔记 论文的题目是“Attention-based Audio-Visual Fusion for Rubust Automatic Speech recognition”,翻译成中文为 ...
- zoj 3471 Most Powerful(状压dp+Tsp问题+连续性问题)
上来直接一波敲键盘,直接套Tsp问题的代码 然后WA 发现貌似这道题没有连续性. Tsp问题是一条路径,一个点到另一个点,多了一个限制,所以就需要加多一维 而这道题没有限制,也就是说那一维不需要加,我 ...