js全屏
2015-07-07 14:06
633 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>微信墙</title> <link rel="stylesheet" type="text/css" href="css.css"> <script type="text/javascript" src="images/jq.min.1.11.1.js"></script> <script type="text/javascript"> (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); } }); }; } window.fullScreenApi = fullScreenApi; })(); </script> </head> <body class="wx-wall" id="fullscreenbox"> <div class="wx-wall-main" > </div> <div class="wx-wall-footer"> <div class="footer-content"> <div class="footer-notice"> <div class="notice"> <marquee></marquee> </div> </div> <div class="footer-menu"> <ul> <li><a class="quanpin" title="全屏" href="javascript:void(0)" id="fullscreenbtn"></a></li> </ul> </div> </div> </div> </div> </body> <script type="text/javascript"> $(function(){ $('#fullscreenbtn').click(function(){ if(window.fullScreenApi.supportsFullScreen){ window.fullScreenApi.requestFullScreen(document.getElementById('fullscreenbox')); }else{ alert('就你这浏览器,基本就告别全屏功能了'); } }); }); </script> </html>
相关文章推荐
- js--关于点击的小知识 电脑版与手机
- Extjs给gridPanel添加单价双击事件和获取当前行的数据
- Extjs的radio单选框的使用
- javascript它【蛇系列】第一弹:简单的蛇实现
- javascript中的作用域
- [LeetCode][JavaScript]Implement Trie (Prefix Tree)
- 第六章 javaScript执行环境和作用域
- VS支持json后缀名的文件
- js中escape,encodeURI,encodeURIComponent区别
- javascript正则表达式(一)
- 理解JS中的prototype
- JSON对象转换成url参数
- Jq_javascript跨域问题
- js作用域详解
- 让jsp页面不缓存验证码图片。
- javascript数组排序汇总
- [TypeScript] JSON对象转TypeScript对象范例
- 理解 JavaScript 中的 Function.prototype.bind
- Js组件的一些写法
- avalon.js实践 svg地图配置工具