HTML5实现网页的全屏切换
使用HTML5提供的JavaScript Api可以实现主流浏览器的全屏和退出全屏操作，封装成进入全屏和退出全屏的函数如下：
//进入全屏
function enterFullScreen() {
var de = document.documentElement;
if (de.requestFullscreen) {
de.requestFullscreen();
} else if (de.mozRequestFullScreen) {
de.mozRequestFullScreen();
} else if (de.webkitRequestFullScreen) {
de.webkitRequestFullScreen();
}
}
//退出全屏
function exitFullScreen() {
var de = document;
if (de.exitFullscreen) {
de.exitFullscreen();
} else if (de.mozCancelFullScreen) {
de.mozCancelFullScreen();
} else if (de.webkitCancelFullScreen) {
de.webkitCancelFullScreen();
}
}
然后将这两个函数绑定到超链接或者按钮事件上就可以实现浏览器的开启全屏和退出全屏操作
简单的测试页面代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>全屏切换</title>
<script type="text/javascript">
//进入全屏
function enterFullScreen() {
var de = document.documentElement;
if (de.requestFullscreen) {
de.requestFullscreen();
} else if (de.mozRequestFullScreen) {
de.mozRequestFullScreen();
} else if (de.webkitRequestFullScreen) {
de.webkitRequestFullScreen();
}
}
//退出全屏
function exitFullScreen() {
var de = document;
if (de.exitFullscreen) {
de.exitFullscreen();
} else if (de.mozCancelFullScreen) {
de.mozCancelFullScreen();
} else if (de.webkitCancelFullScreen) {
de.webkitCancelFullScreen();
}
}
</script>
</head>
<body>
<div>
<a href="javascript:;" onclick="enterFullScreen()">进入全屏</a>
<a href="javascript:;" onclick="exitFullScreen()">退出全屏</a>
</div>
</body>
</html>
当点击进入全屏时，当前页面会进入全屏状态，并且浏览器会发出提示
当点击退出全屏时将会退出全屏状态
HTML5实现网页的全屏切换的更多相关文章
- js实现网页全屏切换（平滑过渡），鼠标滚动切换
实现效果为页面平滑过渡全屏切换,点击导航和鼠标滚动都可以切换. 效果图: html代码: <!DOCTYPE html> <html> <head lang=" ...
- 原生JS实现全屏切换以及导航栏滑动隐藏及显示——重构前
思路分析: 向后滚动鼠标滚轮,页面向下全屏切换:向前滚动滚轮,页面向上全屏切换.切换过程为动画效果. 第一屏时,导航栏固定在页面顶部,切换到第二屏时,导航条向左滑动隐藏.切换回第一屏时,导航栏向右滑动 ...
- jQuery鼠标滚动垂直全屏切换代码
体验效果:http://hovertree.com/texiao/jquery/68/ 源码下载:http://hovertree.com/h/bjaf/f643upc4.htm 代码如下: < ...
- VirtualBox全屏切换
用VirtualBox的时候,如果设置为全屏,想再切换回来,没有什么菜单,只有通过键盘的快捷键来操作,才可以恢复. 我常常忘掉,所以老是得去找,以后需要记住这几个按键的快捷键. 1.全屏与非全屏切换: ...
- 基于Ascensor.js全屏切换页面插件
今天给大家分享一款基于Ascensor.js全屏切换页面插件,这款实例 适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览 ...
- jquery简单的大背景banner图片全屏切换
详细内容请点击 这个是我初毕业刚进公司那会帮同事(同时也是同学)写的一个PC端的全屏图片切换效果,对于刚毕业的我来说写出来那会的喜悦之情是无法言表的,那时的我还是什么不懂的小白白,俗称菜鸟.个人网站上 ...
- jquery横向纵向鼠标滚轮全屏切换
html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF- ...
- jQuery插件开发——全屏切换插件
这个插件包含三个部分:HTML结构.CSS代码和JS代码. HTML结构是固定的,结构如下: <!--全屏滚动--> <div class="fullpage-contai ...
- PPAPI插件的全屏切换处理
有时你会想让PPAPI插件全屏(比方播放视频时),这次来看看怎么做. PPAPI和CEF App两側都要处理. foruok原创,转载请注明出处.欢迎关注foruok的订阅号"程序视界&qu ...
随机推荐
- Error: Could not find the required version of the Java(TM) 2 Runtime Environment in'(null)'.
今天拿到一台新机器,搭一下开发环境,安装个JDK是个很基本的事情,从Orale的网站上下了个安装,但是一直出下面的错: 我信了你的邪,Google了一圈,有人说是可能文件下载有问题,重新下载安装就可以 ...
- The week in .NET - 1/12/2015
On.NET Last week, we had Mads Torgersen on the show to talk about language design in general, and C# ...
- IE10开始支持CSS3 Transitions, Transforms 和 Animations
这是一个好消息,微软公开说明IE10预览版已经支持CSS3属性 Transitions, Transforms 和 Animations,你可以直接写transitions,而不是加个恶心的前缀-ms ...
- 《Java程序设计与数据结构教程（第二版）》学习指导
<Java程序设计与数据结构教程(第二版)>学习指导 欢迎关注"rocedu"微信公众号(手机上长按二维码) 做中教,做中学,实践中共同进步! 原文地址:http:// ...
- iOS聊天下拉刷新聊天记录的实现
1. 想法 最近在开发一个社交类app,要实现类似微信那种下拉刷新聊天记录的功能. 一般有两种实现方式: 1. 直接fetch一个entity的所有数据然后在内存中做filter,就是把所有聊天记录先 ...
- 琴弦文字 － jquery插件
这是一个基于jquery的琴弦效果插件. 以前曾经见过这个效果,有过尝试的想法但是当时技能点还不够. 前天在火车上偶然想起这个,认真思索了一下,一气呵成 :D 看来最近技能树点偏的不太远. 效果展示 ...
- iOS小知识点（非UI部分）
1. _cmd 表示当前方法的@SEL指针, - (void)putString{} 对于这个函数_cmd 等效于@selector(putString)
- FFT小总结
FFT实质上做的是循环卷积,ck=sigam(ai*bj,(i+j)%n=k),其中n是倍长后的长度,所以我们有时候需要的只是普通的卷积,我们就需要把原数组倍长,再用FFT求卷积,由于高位都是0,所以 ...
- log4j配置文件加载
log4j的jar包内部包含preference默认配置,使用者可以通过log4j.xml或log4j.properties来指定自己的配置.xml比properties优先.另外注意java读取pr ...
- Werewolf流程分析
werewolf大致流程 首先是房主创建房间,创建成功以后房主开启web socket连接. 其他成员加入房间,加入房间后新成员和老成员的游戏玩家列表都会更新,然后新成员也要开启web socket连 ...