可参考文档:http://blog.csdn.net/tywali/article/details/8623938

脚本代码

 <script type="text/javascript">
var support = {
fullscreen: "fullscreen" in document || "webkitIsFullScreen" in document || "mozFullScreen" in document
}; $.fn.fullscreen = function (e) {
return "onfullscreenchange" in document ? this.bind("fullscreenchange", e) : "onwebkitfullscreenchange" in document ? this.bind("webkitfullscreenchange", e) : "onmozfullscreenchange" in document && this.bind("mozfullscreenchange", e),
this
},
$.fn.requestFullScreen = function () {
var e = this[0];
return e.requestFullScreen ? e.requestFullScreen() : e.mozRequestFullScreen && document.mozFullScreenEnabled ? e.mozRequestFullScreen() : e.webkitRequestFullScreen && e.webkitRequestFullScreen(),
this
},
$.isFullscreen = function () {
return "fullscreen" in document ? document.fullscreen : "webkitIsFullScreen" in document ? document.webkitIsFullScreen : "mozFullScreen" in document ? document.mozFullScreen : !1
},
$.exitFullscreen = function () {
document.exitFullscreen ? document.exitFullscreen() : document.mozCancelFullScreen ? document.mozCancelFullScreen() : document.webkitCancelFullScreen && document.webkitCancelFullScreen()
}; $(function () {
var mainStage = $(".main-stage");//要显示全屏的div
$("a.btn-fullscreen").click(function () { //点击事件
if (support.fullscreen) {
if ($.isFullscreen()) {
$.exitFullscreen();
mainStage.css("right", "320px");
} else {
mainStage.requestFullScreen();
mainStage.css("right", 0);//控制右边的部分隐藏
}
}
});
$("#theatre").keyup(function (e) {
if (e.which === 27) {
mainStage.css("right", "320px");//恢复原状
}
}); if (!support.fullscreen) { $("a.btn-fullscreen").addClass("hidden") }//不支持全屏则隐藏按钮 });
</script>

Fullscreen API 全屏显示网页的更多相关文章

  1. 全屏显示网页FULLSCREEN API

    第一次看到应用 Fullscreen API 全屏显示网页,是 FaceBook 中的照片放大.作为一个比较新的 API,目前只有 Safari.Chrome 和 FireFox 三种浏览器支持该特性 ...

  2. 【温故而知新-Javascript】窗口效果 (全屏显示窗口、定时关闭窗口)

    1.全屏显示窗口 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...

  3. 第89天:HTML5中 访问历史、全屏和网页存储API

    一.访问历史 API 通过history对象实现前进.后退和刷新之类的操作 history新增的两个方法history.replaceState()和history.pushState()方法属于HT ...

  4. echarts 饼图 + 全屏显示

    效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  5. JavaScript:让浏览器全屏显示

    并不是所有人都会按F11让浏览器全屏显示~~~ 一.直接上代码 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xh ...

  6. 在VC++6.0开发中实现全屏显示

    全屏显示是一些应用软件程序必不可少的功能.比如在用VC++编辑工程源文件或编辑对话框等资源时,选择菜单“View\Full Screen”,即可进入全屏显示状态,按“Esc”键后会退出全屏显示状态. ...

  7. Android 全屏显示的方法(不包含状态栏)

    我们都知道在Android中某些功能的实现往往有两种方法:一种是在xml文件中设置相应属性,另一种是用代码实现.同样Android实现全屏显示也可以通过这两种方法实现: 1.在AndroidManif ...

  8. Android 全屏显示

    Android全屏显示: @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInst ...

  9. Qt on Android:让 Qt Widgets 和 Qt Quick 应用全屏显示

    Android 系统版本号非常多,较新的 4.4 ,较老的 2.3 ,都有人用. Qt on Android 开发的 Android 应用.默认在 Android 设备上是非全屏的. 而有些应用的需求 ...

随机推荐

  1. 最短路径之Floyd算法

    Floyd算法又称弗洛伊德算法,也叫做Floyd's algorithm,Roy–Warshall algorithm,Roy–Floyd algorithm, WFI algorithm. Floy ...

  2. 03-树1 树的同构 (C语言链表实现)

    #include <stdio.h> #include <stdlib.h> #include <string.h> #include <stdbool.h& ...

  3. 十一个行为模式之策略模式(Strategy Pattern)

    定义: 定义一系列的算法,将每一个算法封装起来,并使它们之间可以相互替换,让算法具有可扩展性和对立性. 结构图: Context:环境类,算法的使用者.对外提供了算法使用的接口,并且持有一个抽象算法类 ...

  4. 异常处理的解决方案 OneTrueError

    应用程序安装在用户计算机上,异常处理一直是反复出现的问题.用户报障中的描述不足以重现该问题.你不得不猜测,或者只是做猴子测试,以找出其异常出现的根源. 最严重的问题是当认为你已经找出了原因并纠正它,但 ...

  5. 基于WCF MSMQ 的企业应用解决方案

    最近研究了一下基于MSMQ的WCF应用,从书上.网上查了很多资料,但始终没能彻底理解WCF-MSMQ的工作原理,也没能得到一个合理的应用解决方案.索性还是自己做个实验,探索一下吧.经过反复试验,颇有收 ...

  6. GeoEvent使用问题及解决方法整理

    假如GeoEvent的部署环境是一个典型的WebGIS架构(Portal+GIS Server),往往会遇到一些问题,例如: 问题:发布的StreamService流服务无法查看. 原因:默认发布的S ...

  7. android 修改videoview的宽度和高度

    如果直接用android的videoview.他是不允许你随意的修改宽度和高度的,所以我们要重写videoview! package com.hysmarthotel.view; import and ...

  8. iOS之weak和strong、懒加载及循环引用

    一.weak和strong 1.理解 刚开始学UI的时候,对于weak和strong的描述看得最多的就是“由ARC引入,weak相当于OC中的assign,但是weak用于修饰对象,但是他们都不会造成 ...

  9. php关键词替换的类(避免重复替换,保留与还原原始链接)

    转载:http://www.169it.com/blog_article/601549531.html 本节主要内容:一个关键词替换的类 主要可以用于关键词过滤,或关键词查找替换方面. 实现过程分析: ...

  10. <<你的灯亮着吗?>>读书笔记

    本书是美国计算机传奇人物杰拉尔德.温伯格和唐纳德.高斯所著,我在网上买到的2003年版的本书,发现本书用20则幽默的现代寓言故事,60幅精美插图,以及一系列的适当提问和建议,让我们的思考方式慢慢得以扩 ...