可参考文档: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. ExpandableListView实现展开更多和收起更多

    [需求]: 如上面图示 当点开某个一级菜单的时候,其他菜单收起: 子级菜单默认最多5个: 多于5个的显示"展开更多" 点击"展开更多",展开该级所有子级菜单,同 ...

  2. 微信js-sdk注意事项

    1.录音结束后播放需要localId,用 var voice = { localId: '', serverId: '' }; 来存储,然后用voice.localId引用 2.token和ticke ...

  3. 天津政府应急系统之GIS一张图(arcgis api for flex)讲解(二)鹰眼模块

    讲解GIS功能模块实现之前,先大概说一下flexviewer的核心配置文件config.xml,系统额GIS功能widget菜单布局.系统的样式.地图资源等等都是在这里配置的,这里对flexviewe ...

  4. iOS 支付宝的使用

    支付宝相关资源下载地址:支付宝开放平台  在移动支付功能处下载. 一.使用官方的Demo 需要配置基本信息: 打开“APViewController.m”文件,对以下三个参数进行编辑. 二.集成支付宝 ...

  5. Dev Winform 简洁界面模板制作

    今天看到Dev的安装程序,发现界面很漂亮如下图: 于是想到做个类似的简洁明了的界面出来,平常开发小程序什么的都方便很多. 1.首先是自己添加了一个XtraForm,我们发现它有点丑(我为了性能,习惯把 ...

  6. 在SharePoint中创建可自定义属性的文件夹

    概况 阅读时间:约5分钟 适用版本:SharePoint Server 2010及以上 面向用户:普通用户.管理员.开发人员 难度指数:★★★☆☆ SharePoint中的文件夹分为2种,一种是文档库 ...

  7. Windows系统变量

    %ALLUSERSPROFILE% : 列出所有用户Profile文件位置. %APPDATA% : 列出应用程序数据的默认存放位置. %CD% : 列出当前目录. %CLIENTNAME% : 列出 ...

  8. IOS开发基础知识--碎片4

    十七:返回到主线程进行操作,对UI进行更新只能在主线程进行 /*将数据显示到UI控件,注意只能在主线程中更新UI, 另外performSelectorOnMainThread方法是NSObject的分 ...

  9. ios 显示缓存数据库

    IOS8以前版本, 如果是模拟器的话, 在这个路径中找到你的应用:/Users/你的用户名/Library/Application Support/iPhone Simulator/5.1/Appli ...

  10. Android 框架学习之 第一天 okhttp & Retrofit

    最近面试,一直被问道新技术新框架,这块是短板,慢慢补吧. 关于框架的学习,分几个步骤 I.框架的使用 II.框架主流使用的版本和Android对应的版本 III.框架的衍生使用比如okhttp就会有R ...