需要的资源

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

/**
 * @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代码

<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”效果设置了一下：

#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