jQuery制作Web全屏效果

需要的资源

1.jQuery版本库是必不可少的
2.jQuery FullScreen plugin
如果你下载不方便的话，你可以直接把下面的代码copy到你本地
JQuery FullScreen plugin：

001 002 003 004 005 006 007 008 009 010 011 012 013 014 015 016 017 018 019 020 021 022 023 024 025 026 027 028 029 030 031 032 033 034 035 036 037 038 039 040 041 042 043 044 045 046 047 048 049 050 051 052 053 054 055 056 057 058 059 060 061 062 063 064 065 066 067 068 069 070 071 072 073 074 075 076 077 078 079 080 081 082 083 084 085 086 087 088 089 090 091 092 093 094 095 096 097 098 099 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

/**  * @name        jQuery FullScreen Plugin  * @author        Martin Angelov  * @version     1.0  * @url            http://tutorialzine.com/2012/02/enhance-your-website-fullscreen-api/  * @license        MIT License  */    (function ($) {        // Adding a new test to the jQuery support object     $.support.fullscreen = supportFullScreen();        // Creating the plugin     $.fn.fullScreen = function (props) {            if (!$.support.fullscreen || this.length != 1) {                // The plugin can be called only             // on one element at a time                return this;         }            if (fullScreenStatus()) {             // if we are already in fullscreen, exit             cancelFullScreen();             return this;         }            // You can potentially pas two arguments a color         // for the background and a callback function            var options = $.extend({             'background': '#111',             'callback': function () {}         }, props);            // This temporary div is the element that is         // actually going to be enlarged in full screen            var fs = $('<div>', {             'css': {                 'overflow-y': 'auto',                 'background': options.background,                 'width': '100%',                 'height': '100%'             }         });            var elem = this;            // You can use the .fullScreen class to         // apply styling to your element         elem.addClass('fullScreen');            // Inserting our element in the temporary         // div, after which we zoom it in fullscreen         fs.insertBefore(elem);         fs.append(elem);         requestFullScreen(fs.get(0));            fs.click(function (e) {             if (e.target == this) {                 // If the black bar was clicked                 cancelFullScreen();             }         });            elem.cancel = function () {             cancelFullScreen();             return elem;         };            onFullScreenEvent(function (fullScreen) {                if (!fullScreen) {                    // We have exited full screen.                 // Remove the class and destroy                 // the temporary div                    elem.removeClass('fullScreen').insertBefore(fs);                 fs.remove();             }                // Calling the user supplied callback             options.callback(fullScreen);         });            return elem;     };           // These helper functions available only to our plugin scope.           function supportFullScreen() {         var doc = document.documentElement;            return ('requestFullscreen' in doc) ||             ('mozRequestFullScreen' in doc && document.mozFullScreenEnabled) ||             ('webkitRequestFullScreen' in doc);     }        function requestFullScreen(elem) {            if (elem.requestFullscreen) {             elem.requestFullscreen();         } else if (elem.mozRequestFullScreen) {             elem.mozRequestFullScreen();         } else if (elem.webkitRequestFullScreen) {             elem.webkitRequestFullScreen();         }     }        function fullScreenStatus() {         return document.fullscreen ||             document.mozFullScreen ||             document.webkitIsFullScreen;     }        function cancelFullScreen() {         if (document.exitFullscreen) {             document.exitFullscreen();         } else if (document.mozCancelFullScreen) {             document.mozCancelFullScreen();         } else if (document.webkitCancelFullScreen) {             document.webkitCancelFullScreen();         }     }        function onFullScreenEvent(callback) {         $(document).on("fullscreenchange mozfullscreenchange webkitfullscreenchange", function () {             // The full screen status is automatically             // passed to our callback as an argument.             callback(fullScreenStatus());         });     }    })(jQuery);

HTML代码

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js” type=”text/javascript”></script> <script type=”text/javascript” src=”http://www.w3cways.com/js/jquery.fullscreen.js”></script> <!–这里我把“jquery.fullscreen.js”放到本站–> <div id=”content”>     <a href=”#” id=”fsButton”>点击变全屏</a>     <div class=”wrapper”>         //页面内容     </div> </div> <script type=”text/javascript”> $(function () {     $(“#fsButton”).click(function (e) {         $(“#content”).fullScreen();         e.preventDefault();     }); }); </script>

我将所有页面内容放在了“div#content”中，然后里面放了一个“#fsButton”按钮，并且页面其他内容放置在“div.wrapper”中。为什么要放置一个按钮呢？呆会你就明白了。
CSS代码
下面就是要用样式来美化我们的页面了，这里我就不详细贴上代码了，我只是将“div#content”效果设置了一下：

1 2 3 4 5 6 7 8

#content, #content.fullScreen {     width: 960px;     margin: 0 auto;     font: 17px serif;     padding: 45px 45px 10px;     background: #fff; }

大家可以根据自己所需进行样式的美化。我这里只是强调一点“#content.fullScreen”，给“#content”上另外增加一个不同的样式（不过此处我为了偷懒，我使用的是一样的效果）。

如果您想了解更详细的，可以狠狠的点击Enhance Your Website with the FullScreen API

Demo

转载请注明来源：Web前端(W3Cways.com) - Web前端学习之路 » jQuery制作Web全屏效果