Fullscreen API 全屏显示网页
可参考文档: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 全屏显示网页的更多相关文章
- 全屏显示网页FULLSCREEN API
第一次看到应用 Fullscreen API 全屏显示网页,是 FaceBook 中的照片放大.作为一个比较新的 API,目前只有 Safari.Chrome 和 FireFox 三种浏览器支持该特性 ...
- 【温故而知新-Javascript】窗口效果 (全屏显示窗口、定时关闭窗口)
1.全屏显示窗口 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...
- 第89天:HTML5中 访问历史、全屏和网页存储API
一.访问历史 API 通过history对象实现前进.后退和刷新之类的操作 history新增的两个方法history.replaceState()和history.pushState()方法属于HT ...
- echarts 饼图 + 全屏显示
效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- JavaScript:让浏览器全屏显示
并不是所有人都会按F11让浏览器全屏显示~~~ 一.直接上代码 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xh ...
- 在VC++6.0开发中实现全屏显示
全屏显示是一些应用软件程序必不可少的功能.比如在用VC++编辑工程源文件或编辑对话框等资源时,选择菜单“View\Full Screen”,即可进入全屏显示状态,按“Esc”键后会退出全屏显示状态. ...
- Android 全屏显示的方法(不包含状态栏)
我们都知道在Android中某些功能的实现往往有两种方法:一种是在xml文件中设置相应属性,另一种是用代码实现.同样Android实现全屏显示也可以通过这两种方法实现: 1.在AndroidManif ...
- Android 全屏显示
Android全屏显示: @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInst ...
- Qt on Android:让 Qt Widgets 和 Qt Quick 应用全屏显示
Android 系统版本号非常多,较新的 4.4 ,较老的 2.3 ,都有人用. Qt on Android 开发的 Android 应用.默认在 Android 设备上是非全屏的. 而有些应用的需求 ...
随机推荐
- Java开发web的几种开发模式
Java Web开发方案有多种可供选择,这里列举一些经典的开发模式进行横向比较,为Java Web的开发模式选择提供参考.除此之外还有好多方案(如Tapestry和Wicket等等)并不了解,这里就不 ...
- 使用PHPMailer发送邮件
如果要使用php发送邮件,则可以使用PHP 内置的mail() 函数,但是mail()函数需要有服务器支持 必须有自己的邮件服务器,如果使用stmp服务来发送邮件的话相当于代替别人发送,而不是从自己服 ...
- Ext.NET MVC 配置问题总结
随着VS版本和.NET MVC版本.EF的版本的不断更新,虽然很多功能随着版本的提升而更完善,但对于旧版本开发的软件就有点悲催了,或许很多开发者都遇到类似的问题! 最近有一个项目是用.NET MVC3 ...
- [转载]T-SQL(MSSQL)语句查询执行顺序
注意:笔者经过实验和查阅资料,已在原作基础上做了部分更改.更改不代表原作观点,查看原作请点击下方链接. 原文出处: 作者:张龙豪 链接:http://www.cnblogs.com/knowledge ...
- JavaScript调试 - debugger语句
语法: debugger 作用: 启动调试器 备注: 1. 可以将debugger语句放在过程的任何地方以中止执行.2. 使用debugger语句类似于在代码中设置断点. 3. debugger语句中 ...
- Sharepoint学习笔记—习题系列--70-576习题解析 -(Q105-Q108)
Question 105 You are designing a SharePoint 2010 application that contains a single list named Us ...
- iOS之There was an internal API error错误
There was an internal API error. 错误原因:把Product Name作为程序名称,程序名称错乱 解决方法:检查Product Name, 不要包含中文以及特殊字符.在 ...
- AFNetworking 3.0 断点续传 使用记录
最近项目中用到了压缩包下载,使用AFNetworking 3.0 下载压缩包 支持断点续传 代码如下: #import "HDInternet_handler.h" #import ...
- AJAX初探,XMLHttpRequest介绍
AJAX初探,XMLHttpRequest介绍 AJAX AJAX = Asynchronous JavaScript and XML. 异步的JavaScript和XML. AJ ...
- 自定义AlertDialog控件的使用(AndroidStudio)
AlertDialog 第一种:可随意自定义控件 第一步:自定义弹出的页面 ,新建一个XML页面 如下图 不需要Activity 第二步:在主页面设置一个按钮弹出上图页面 (下面是主要代码 调用 ...