[关闭]
@sammffl 2016-03-10T07:46:50.000000Z 字数 2935 阅读 628

设置特定区域全屏

小技巧

  1. (function () {
  2.     var fullScreenApi = {
  3.             supportsFullScreen: false,
  4.             isFullScreen: function () {
  5.                 return false;
  6.             },
  7.             requestFullScreen: function () {
  8.             },
  9.             cancelFullScreen: function () {
  10.             },
  11.             fullScreenEventName: '',
  12.             prefix: ''
  13.         },
  14.         browserPrefixes = 'webkit moz o ms khtml'.split(' ');
  15.     // check for native support
  16.     if (typeof document.cancelFullScreen != 'undefined') {
  17.         fullScreenApi.supportsFullScreen = true;
  18.     } else {
  19.         // check for fullscreen support by vendor prefix
  20.         for (var i = 0, il = browserPrefixes.length; i < il; i++) {
  21.             fullScreenApi.prefix = browserPrefixes[i];
  22.             if (typeof document[fullScreenApi.prefix + 'CancelFullScreen'] != 'undefined') {
  23.                 fullScreenApi.supportsFullScreen = true;
  24.                 break;
  25.             }
  26.         }
  27.     }
  28.     // update methods to do something useful
  29.     if (fullScreenApi.supportsFullScreen) {
  30.         fullScreenApi.fullScreenEventName = fullScreenApi.prefix + 'fullscreenchange';
  31.         fullScreenApi.isFullScreen = function () {
  32.             switch (this.prefix) {
  33.                 case '':
  34.                     return document.fullScreen;
  35.                 case 'webkit':
  36.                     return document.webkitIsFullScreen;
  37.                 default:
  38.                     return document[this.prefix + 'FullScreen'];
  39.             }
  40.         }
  41.         fullScreenApi.requestFullScreen = function (el) {
  42.             return (this.prefix === '') ? el.requestFullScreen() : el[this.prefix + 'RequestFullScreen']();
  43.         }
  44.         fullScreenApi.cancelFullScreen = function (el) {
  45.             return (this.prefix === '') ? document.cancelFullScreen() : document[this.prefix + 'CancelFullScreen']();
  46.         }
  47.     }
  48.     // jQuery plugin
  49.     if (typeof jQuery != 'undefined') {
  50.         jQuery.fn.requestFullScreen = function () {
  51.             return this.each(function () {
  52.                 if (fullScreenApi.supportsFullScreen) {
  53.                     fullScreenApi.requestFullScreen(this);
  54.                     //setTimeout(function () {
  55.                       //  deferredOpen.resolve();
  56.                     //}, 100);
  57.                 }
  58.             });
  59.         };
  60.         jQuery.fn.cancelFullScreen = function () {
  61.             return this.each(function () {
  62.                 if (fullScreenApi.supportsFullScreen) {
  63.                     fullScreenApi.cancelFullScreen(this);
  64.                     /*setTimeout(function () {
  65.                         deferredClose.resolve();
  66.                     }, 100);*/
  67.                 }
  68.             });
  69.         };
  70.     }
  71.     // export api
  72.     window.fullScreenApi = fullScreenApi;
  73. })();
  1. body {
  2.     background: #fff;
  3. }
  5. #fullScreenBtn {
  6.     float: right;
  7.     cursor: pointer;
  8.     font-family: Segoe UI, Verdana, sans-serif;
  9.     text-shadow: -3px 0 4px #fff;
  10.     color: #2fa4e7;
  11.     font-weight: bold;
  12. }
  14. #fullScreenBtn:hover {
  15.     text-decoration: underline;
  16.     color: #2f89ca;
  17. }
  19. /*button{*/
  20. /*border:1px solid #ccc;*/
  21. /*cursor:pointer;*/
  22. /*display:block;*/
  23. /*margin:auto;*/
  24. /*position:relative;*/
  25. /*top:100px;*/
  26. /*}*/
  27. .fullScreen {
  28.     /*padding-top:10%;*/
  29.     text-align: center;
  30.     background: none repeat scroll 0 0 #FFFFFF;
  31. }
  33. /*Mozilla proposal (dash)*/
  34. .fullScreen:full-screen {
  35.     width: 100%;
  36.     height: 100%;
  37. }
  39. /* W3C proposal (no dash) */
  40. .fullScreen:fullscreen {
  41.     width: 100%;
  42.     height: 100%;
  43. }
  45. /* currently working vendor prefixes */
  46. .fullScreen:-webkit-full-screen, .fullScreen:-moz-full-screen {
  47.     width: 100%;
  48.     height: 100%;
  49. }
  51. :-webkit-full-screen {
  52.     width: 100%;
  53.     height: 100%;
  54. }
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <link rel="stylesheet" href="demo.css"/>
  7. </head>
  8. <body>
  9. <button>full screen</button>
  10. <div id="fullScreen" class="fullScreen">
  11.     <a href="#">back</a>
  12. </div>
  13. <script src="../bower_components/jquery/dist/jquery.js"></script>
  14. <script src="demo.js"></script>
  16. <script>
  17.     $("button").click(function () {
  18.         $("#fullScreen").requestFullScreen();
  19.     });
  20.     $("a").click(function () {
  21.         $("#fullScreen").cancelFullScreen();
  22.     });
  23. </script>
  24. </body>
  25. </html>
添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注