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 设备上是非全屏的. 而有些应用的需求 ...
随机推荐
- Netty(五)序列化protobuf在netty中的使用
protobuf是google序列化的工具,主要是把数据序列化成二进制的数据来传输用的.它主要优点如下: 1.性能好,效率高: 2.跨语言(java自带的序列化,不能跨语言) protobuf参考文档 ...
- 轻量、强大的代码编辑器控件-WinForm完美版
前段时间做个小项目需要用到一个代码编辑器控件,但网上搜了半天,居然没发现一个完全满意的编辑器.现有的一些编辑器有: FastedTextBox 优点:1. 轻量. 2. 样式美观. 3. DEMO完 ...
- C#中==、Equals、ReferenceEquals的区别
原文链接:http://www.studyofnet.com/news/1188.html 本文导读: C#中Equals , == , ReferenceEquals都可以用于判断两个对象的个体是不 ...
- 【blade04】用面向对象的方法写javascript坦克大战
前言 javascript与程序的语言比如C#或者java不一样,他并没有“类”的概念,虽然最新的ECMAScript提出了Class的概念,我们却没有怎么用 就单以C#与Java来说,要到真正理解面 ...
- 轻松掌握:JavaScript观察者模式
观察者模式 观察者模式也叫"订阅者/发布者"模式,定义对象间的一种一对多的依赖关系,发布者可以向所有订阅者发布消息. 观察者模式被广泛地应用于JavaScript客户端编程中.所有 ...
- React Native知识2-Text组件
Text用于显示文本的React组件,并且它也支持嵌套.样式,以及触摸处理.在下面的例子里,嵌套的标题和正文文字会继承来自styles.baseText的fontFamily字体样式,不过标题上还附加 ...
- netstat监控大量ESTABLISHED连接与Time_Wait连接问题
问题描述: 在不考虑系统负载.CPU.内存等情况下,netstat监控大量ESTABLISHED连接与Time_Wait连接. # netstat -n | awk '/^tcp/ {++y[$NF] ...
- 此实现不是 Windows 平台 FIPS 验证的加密算法的一部分的解决办法方案
最近操作系统不断地报异常或错误,可能是用得太久了,而刚好工作比较多又不想重新安装系统,但用一段时间后(一天大概有两次)系统就出现各种问题导致无法继续使用真是痛苦万分啊,今天又来了这样的错误: 此实现不 ...
- Linux安装DBI/DBD-ORACLE
本文只是学习如何配置PERL DBI.PERL DBD时,整理的一个学习实践文档,大部分参考网上资料,详情请见下面参考资料. PERL对数据库的支持广而且全,几乎所有的主流数据库都有与之相应的PERL ...
- [AlwaysOn Availability Groups]AlwaysOn健康诊断日志
AlwaysOn健康诊断日志 为了监控primary可用副本的健康状况,SQL Server资源DLL使用SQL Server2012的过程sp_server_diagnostics. SQL Ser ...