一个支持chrome、firefox的全屏插件

插件代码

?

(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;

})();

　　调用代码

?

$(function(){

    $('#fullscreenbtn').click(function(){

        if(window.fullScreenApi.supportsFullScreen){

            window.fullScreenApi.requestFullScreen(document.getElementById('fullscreenbox'));

        }else{

            alert('就你这浏览器，基本就告别全屏功能了');

        }

    });

});

　　HTML代码结构

?

    http://pic002.cnblogs.com/images/2012/277258/2012041400022949.gif" alt="" />

　　基于fullscreen功能，我们就可以做出很多效果，比如相册：

　　

　　又比如视频中的全屏功能：

　　

　　当然也不能不说我的HoorayOS中窗口全屏的使用：

　　

　　插件来源地址：