点击按钮全屏,按esc退出全屏

需求:点击按钮让页面全屏,并且菜单导航栏隐藏,content宽度100%;按esc键退出全屏,菜单导航栏显示;

问题:按esc退出全屏无法监听到键盘按下事件,(兼容性问题,监听是否全屏状态,火狐监听不起作用);

解决思路:监听页面浏览器大小,判断页面的实际高度是否等于浏览器的分辨率的高度;

注意事项:必须要把body的高度设置为100%;margin为0;padding为0;否则页面的实际高度不等于浏览器的分辨率的高度;

*************************************************************************************************************************************************

css部分

html部分

js部分

1)点击进入全屏

2)、监听页面变化 执行后续操作

原文地址:https://www.cnblogs.com/wyy1020/p/11422423.html

时间: 2024-10-09 19:13:56

点击按钮全屏,按esc退出全屏的相关文章

手机影音第九天,控制视频全屏播放与退出全屏播放,音量调节按钮来控制视频音量与静音的实现

代码以托管到码云,有兴趣的小伙伴可以下载看看 https://git.oschina.net/joy_yuan/MobilePlayer 一.视频全屏播放与退出全屏 系统默认的videoview类,没有调整大小的方法,因此需要自定义一个类,继承videoview,然后重写里面的三个构造方法,再自定义一个调整视频播放页面大小的方法. 1.布局文件 同时,在视频播放的布局文件中,videoview布局要引用上面自定义的类. <?xml version="1.0" encoding=&

iOS 多个播放器同时播放,双击全屏,单击退出全屏

前言:公司需求如下:点击一个按钮播放一个视频,最多同时播放4个:双击某视频让其全屏,单击再恢复原来的样子.IOS的播放器有两种,MPMoviePlayerController,AVAudioPlayer.首先我尝试的是前者,发现并不能让两个视频同时播放,当播放第二个视频的时候,第一个就自动停止了:后来又找了些资料试了试后者,完美解决了这个问题. 多个播放器同时播放,资料参考自:http://ios.jobbole.com/84287/ ,这里介绍的挺详细的,文章后面还有项目可以下载演示,这里就不

Qt中子窗口全屏显示与退出全屏

在Qt开发中偶尔遇到子窗口全屏显示和退出全屏的功能需求,是一种比较正常的情况,首先,我们需要知道子窗口全屏显示与退出全屏主要会调用的方法有哪些,下面将列举此过程主要调用的方法: isFullScreen():判断窗口当前是处于全屏状态还是非全屏状态 setWindowFlags(Qt::WindowFlags type):设置窗口属性 showFullScreen():设置窗口全屏显示 showNormal():设置窗口恢复原来显示(Restores the widget after it ha

js控制页面的全屏展示和退出全屏显示

<!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <body > <button id="btn" >js控制页面的全屏展示和退出全屏显示</button> <div id="content" style="

QT中关于窗口全屏显示与退出全屏的实现

近期在学习QT时遇到了很多问题这也是其中一个,个人通过在各种书籍和网络上的查阅找到了一些关于这方面的答案,希望能给大家一些帮助. 首先,在QT中对于窗口显示常用的有这么几个方法可以调用: Qt全屏显示函数            showFullScreen() Qt最大化显示函数         showMaximized()Qt最小化显示函数         showMinimized()Qt固定尺寸显示函数      resize(x,y)Qt设置最大尺寸函数      setMaximum

android开发:全屏和退出全屏

android开发:全屏和退出全屏 from://http://blog.csdn.net/dyllove98/article/details/8831933 2013-04-21 20:31 413人阅读 评论(0) 收藏 举报 xml代码: <Button android:id="@+id/button5" android:layout_width="wrap_content" android:layout_height="wrap_conten

远程桌面退出全屏/不能全屏/全屏切换的技巧 笔记本电脑没有Break键怎么办?

在使用Windows远程桌面功能时,有时候为了操作方便,我们希望它全屏,也不显示下图的浮动工具栏: 如何设置为不显示上图的浮动工具栏呢? 连接前设置一下显示选项卡,去掉"全屏显示时显示连接栏"的勾选状态. 有连接栏的情况可以通过点击左侧的按钮控制它是自动隐藏还是始终显示. 进入正题 当你点了最大化(向下还原)按钮后,再怎么点都回不到全屏状态了,应该怎么办呢? 又或是你去掉了"全屏显示时显示连接栏"的勾选状态,没有连接栏了,无法退出全屏状态了,应该怎么办呢? 方法是按

Chrome退出全屏问题

最近做了一个号称很炫的B/S展示软件,展示所用浏览器为Google Chrome. 要求展示时全屏,但是页面要有退出全屏按钮(液晶屏没有键盘). 搜索实现方式几乎前篇一律,即两个JS函数一个实现全屏一个退出全屏: function requestFullScreen(element) { if (element.requestFullscreen) element.requestFullscreen(); else if (element.msRequestFullscreen) element

远程桌面退出全屏/不能全屏/全屏切换的技巧

远程桌面退出全屏/不能全屏/全屏切换的技巧退出全屏 问:我的电脑远程登录到服务器上并且切换到了全屏状态,全屏后发现桌面顶部没有浮动工具栏了,想退出全屏状态,不知如何退出了,最后,只有重启电脑.想知道如何退出远程桌面的全屏方法? 答:退出远程桌面全屏状态方法,按下"Ctrl+Alt+Break"组合键,即可切换到普通屏幕状态. 全屏消失 问:Windows 7 下,远程桌面连接前,可以在属性中设置全屏,连接成功后也是全屏,可是如果切换回本地后,全屏就消失了,似乎再也回不去全屏了. 答:方