js全屏代码
2016-03-17 21:26
483 查看
(function () { var fullScreenApi = { supportsFullScreen : false, isFullScreen : function () { return false; }, requestFullScreen : function () {}, cancelFullScreen : function () {}, fullScreenEventName : '', prefix : '' }, browserPrefixes = 'webkit moz o ms khtml'.split(' '); // check for native support if (typeof document.cancelFullScreen != 'undefined') { fullScreenApi.supportsFullScreen = true; } else { // check for fullscreen support by vendor prefix for (var i = 0, il = browserPrefixes.length; i < il; i++) { fullScreenApi.prefix = browserPrefixes[i]; if (typeof document[fullScreenApi.prefix + 'CancelFullScreen'] != 'undefined') { fullScreenApi.supportsFullScreen = true; break; } } } // update methods to do something useful if (fullScreenApi.supportsFullScreen) { fullScreenApi.fullScreenEventName = fullScreenApi.prefix + 'fullscreenchange'; fullScreenApi.isFullScreen = function () { switch (this.prefix) { case '': return document.fullScreen; case 'webkit': return document.webkitIsFullScreen; default: return document[this.prefix + 'FullScreen']; } } fullScreenApi.requestFullScreen = function (el) { return (this.prefix === '') ? el.requestFullScreen() : el[this.prefix + 'RequestFullScreen'](); } fullScreenApi.cancelFullScreen = function (el) { return (this.prefix === '') ? document.cancelFullScreen() : document[this.prefix + 'CancelFullScreen'](); } } // jQuery plugin if (typeof jQuery != 'undefined') { jQuery.fn.requestFullScreen = function () { return this.each(function () { if (fullScreenApi.supportsFullScreen) { fullScreenApi.requestFullScreen(this); } }); }; } // export api window.fullScreenApi = fullScreenApi; })(); $(function(){ $("#fullScreenBtn").click(function(){ $("#fullScreen").requestFullScreen(); }); if(window.top != self){ $("#tip").text("iframe里面不能演示该功能!请点击右下角的全屏查看!").show(); } }); if (!fullScreenApi.supportsFullScreen) { alert("您的破浏览器不支持全屏API哦,请换高版本的chrome或者firebox!"); }
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>javascript启用全屏</title> <script id="jquery_183" type="text/javascript" class="library" src="/js/sandbox/jquery/jquery-1.8.3.min.js"></script> </head> <body> <button id="fullScreenBtn">点击我进入全屏模式</button> <div id="fullScreen" class="fullScreen"> <h1> 我是全屏区域的内容! </h1> <div id="tip" style="display:none;"> </div> </div> </body> </html>
body{ background:#fff; } button{ border:1px solid #ccc; cursor:pointer; display:block; margin:auto; position:relative; top:100px; } .fullScreen{ padding-top:10%; text-align:center; background: none repeat scroll 0 0 #FFFFFF; } /* Mozilla proposal (dash) */ .fullScreen:full-screen { width:100%; height:100%; } /* W3C proposal (no dash) */ .fullScreen:fullscreen { width:100%; height:100%; } /* currently working vendor prefixes */ .fullScreen:-webkit-full-screen, .fullScreen:-moz-full-screen { width:100%; height:100%; } :-webkit-full-screen{ width:100%; height:100%; }
相关文章推荐
- js字符串大小写转换
- JSON与null的解惑
- 2016.3.17__ JavaScript基础_1__第十二天
- Javascript字符串模板处理
- chrome中js的中文乱码
- JavaScript Window - 浏览器对象模型
- JSP学习总结-使用Servlet过滤器
- 闭包只是一种设计原则
- JavaScript encodeURI() 函数
- JavaScript中 var self=this 的解释
- 前端工程师面试题JavaScript部分(第四季)
- JS正则表达式验证身份证号码
- seajs进阶
- 百度地图Web API学习
- JMeter二次开发(2)-编写 JSON Assertion 插件
- JavaScript实现图片轮播
- 读书笔记-js
- Javascript数据类型检测
- JS Cookie存取值
- Jsonp使用简单实例