不知道为什么,我觉得我现在越来越像一个美工,这可不是歧视美工,但是不得不说到底还是干了美工的活。
为了让系统看起来更好顺眼,也为了能有点特色,所以添加了一个“全屏模式”,但是大义上是打着用户体验的口号;
不过全屏起来效果确实很显著,有点对不起人的是只能在IE下实现,并且是IE 8+,好吧,反正不是开放式系统,将就吧。相信大家随便百度一下都可以找到这段js代码,但是好人做到底,写都写这么多了,代码也贴上来吧。
1 2 3 4 | opean = function(){ var wsh = new ActiveXObject("WScript.Shell"); wsh.sendKeys("{F11}"); } |
至于全部代码嘛,相信大家都能自己做。
效果是出来了,不过其实我更加想在google Chrome里面实现,后来尝试了很多方法,显然是不可取的。在这里我声明一下,技术性的东西还是用google比较好,反正我百度了好久也没有找到解决方案,还是谷歌实在。
demo如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 | FullScreen API <style><!-- body { background: #F3F5FA; } #container { width: 600px; padding: 30px; background: #F8F8F8; border: solid 1px #ccc; color: #111; margin: 20px auto; border-radius: 3px; } #specialstuff { background: #33e; padding: 20px; margin: 20px; color: #fff; } #specialstuff a { color: #eee; } #fsstatus { background: #e33; color: #111; } #fsstatus.fullScreenSupported { background: #3e3; } --></style> <div id="container"> <h1>FullScreen API Testing</h1> <div id="specialstuff"> Inside here is special stuff which will go fullscreen As of 10/20/2011, you'll need Safari 5.1, <a href="http://tools.google.com/dlpage/chromesxs">Chrome Canary</a>, or <a href="http://nightly.mozilla.org/">Firefox Nightly</a> Status: <span id="fsstatus"></span> </div> <input id="fsbutton" type="button" value="Go Fullscreen" /> <a href="http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/">Back to article</a> </div> <script type="text/javascript">// <![CDATA[ /* Native FullScreen JavaScript API ------------- Assumes Mozilla naming conventions instead of W3C for now */ (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() { var el = jQuery(this); if (fullScreenApi.supportsFullScreen) { fullScreenApi.requestFullScreen(el); } }); }; } // export api window.fullScreenApi = fullScreenApi; })(); // ]]></script> <script type="text/javascript">// <![CDATA[ // do something interesting with fullscreen support var fsButton = document.getElementById('fsbutton'), fsElement = document.getElementById('specialstuff'), fsStatus = document.getElementById('fsstatus'); if (window.fullScreenApi.supportsFullScreen) { fsStatus.innerHTML = 'YES: Your browser supports FullScreen'; fsStatus.className = 'fullScreenSupported'; // handle button click fsButton.addEventListener('click', function() { window.fullScreenApi.requestFullScreen(fsElement); }, true); fsElement.addEventListener(fullScreenApi.fullScreenEventName, function() { if (fullScreenApi.isFullScreen()) { fsStatus.innerHTML = 'Whoa, you went fullscreen'; } else { fsStatus.innerHTML = 'Back to normal'; } }, true); } else { fsStatus.innerHTML = 'SORRY: Your browser does not support FullScreen'; } // ]]></script> <script type="text/javascript">// <![CDATA[ var _gaq = _gaq || []; _gaq.push(['_setAccount','UA-3734687-9']); _gaq.push(['_trackPageview'],['_trackPageLoadTime']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); // ]]></script> <script type="text/javascript">// <![CDATA[ var clicky = { log: function(){ return; }, goal: function(){ return; }}; var clicky_site_id = 117587; (function() { var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = '//static.getclicky.com/js'; ( document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0] ).appendChild( s ); })(); // ]]></script> |
不过得提醒一下,这是基于html5的,如果您的浏览器不支持html5的话,拜托您还是歇歇吧。
另外,值得一提的是jquery插件的主页上出现了一个全屏视频的API,值得关注哦。
全屏在线演示:http://johndyer.name/lab/fullscreenapi/
jquery插件主页-视频全屏:http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/
介绍HTML5中的全屏API:http://jackyrong.iteye.com/blog/1452281
HTML5 全屏 API:http://sofish.de/1959
转载请注明:迷路的老鼠 » 浏览器全屏js,兼容google Chrome