可参考文档: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. Java程序员应该知道的10个调试技巧

    试可以帮助识别和解决应用程序缺陷,在本文中,作者将使用大家常用的的开发工具Eclipse来调试Java应用程序.但这里介绍的调试方法基本都是通用的,也适用于NetBeans IDE,我们会把重点放在运 ...

  2. PowerDesigner 15设置mysql主键自动增长及基数

    PowerDesigner 15设置mysql主键自动增长及基数 1.双击标示图,打开table properties->columns,  如图点击图标Customize Columns an ...

  3. Ionic + Cordova 跨平台移动开发环境配置

    1.下载安装JDK(根据各自系统选择32位或64位下载),安装完成之后需要做以下环境变量配置 在“系统变量”中,设置3象属性,JAVA_HOME,PATH,CLASSPATH(大小写无所谓),如果已经 ...

  4. 好神奇的代码,可以让匿名用户对特定SharePoint 列表拥用添加列表项的权限哦

    如果你不使用代码,很难从界面上去设置列表的匿名用户(如果可以请告诉我,我会自动删除这个博文)拥有列表项的添加权限. 其实这种需求是非常必要的,比如: 1.允许新用户去提交一个注册申请, 2.在召集临时 ...

  5. [Android]官网《UI/Application Exerciser Monkey》中文翻译

    以下内容为原创,欢迎转载,转载请注明 来自天天博客:http://www.cnblogs.com/tiantianbyconan/p/5049041.html 翻译自 Android Develope ...

  6. android 性能分析案例

    本章以实际案例分析在android开发中,性能方面的优化和处理.设计到知识点有弱引用,memory monitor,Allocation Tracker和leakcanary插件. 1.测试demo ...

  7. iOS百度地图SDK集成详细步骤

    1.iOS百度地图下载地址 http://developer.baidu.com/map/index.php?title=iossdk/sdkiosdev-download 根据需要选择不同的版本  ...

  8. IOS RunLoop浅析 一

    RunLoop犹如其名循环. RunLoop 中有多重模式. 在一个“时刻”只能值执行一种模式. 因此在使用RunLoop时要注意所实现的效果有可能不是你想要的. 在这里用NSTimer展示一下Run ...

  9. AIDL使用解析

    简书本文地址:点击跳转到简书查看 之前面试的时候被问到这个问题,然而当时只有一个大致的印象,随GG,于是我就重新整理的一下.这里大力推荐<Android开发艺术探索>这本书,写的太好了! ...

  10. UIWebView保存网页中的图片(转载)

    现在H5混合原生开发的方式越来越流行,也就要用到UIWebView控件.在开发过程中,我们可能会遇到一个需求,要求我们保存网页上的图片,当用户点击图片的时候,就可以让用户选择是否下载图片. 在系统自带 ...