一. 首先,定義插件名稱,按照JQuery插件命名規(guī)范,命名為 jquery.fullscreen.js 代碼如下:

創(chuàng)新互聯(lián)主營如東網(wǎng)站建設的網(wǎng)絡公司,主營網(wǎng)站建設方案,app軟件定制開發(fā),如東h5微信平臺小程序開發(fā)搭建,如東網(wǎng)站營銷推廣歡迎如東等地區(qū)企業(yè)咨詢

/**
 * Created by Ivan on 2015/1/28.
 * jquery.fullscreen.js
 */
(function($){
    $.fn.toggleFullScreen = function(){
        var supportsFullScreen = false;
        var fullScreenEventName = "";
        var browserPrefixes = ["webkit","moz","o","ms","khtml"];
        var prefix = "";
        var screen = this[0];

        if(document.cancelFullScreen){
            supportsFullScreen = true;
        }else{
            for(var i = 0;i< browserPrefixes.length;i++){
                if(document[browserPrefixes[i] + "CancelFullScreen"]){
                    prefix = browserPrefixes[i];
                    supportsFullScreen = true;
                    break;
                }
            }
        }
        
        var cancelFullScreen = function(){ // 取消全屏
            (prefix === "")?
                document.cancelFullScreen() :
                document[prefix + 'CancelFullScreen']();
        };

        var isFullScreen = function(){//當前是否為全屏
            switch (prefix){
                case "" :
                    return document.fullScreen; break;
                case "webkit":
                    return document.webkitIsFullScreen;break;
                default :
                    return document[prefix + "FullScreen"];
            }
        };

        var requestFullScreen = function(){ //全屏查看
            (prefix === "")?
                screen.requestFullScreen() :
                screen[prefix + 'RequestFullScreen']();
        };

        if(isFullScreen()){
            cancelFullScreen();

        }else{
            requestFullScreen();

        }
        return $(this);
    }
})(jQuery);

二. 通過全屏偽類選擇器,定義全屏樣式:

 .test:-webkit-full-screen{
            min-width: 800px;
            min-height:600px;
            vertical-align:middle;
            text-align:center;
            line-height:600px;
            background-color: #7FC9FA;
            cursor: pointer;
            color: red;
            font-size: 25px;
        }
        .test:-moz-full-screen{
            min-width: 800px;
            min-height:600px;
            vertical-align:middle;
            text-align:center;
            line-height:600px;
            background-color: #7FC9FA;
            cursor: pointer;
            color: red;
            font-size: 25px;
        }
        .test{
            background-color: #c2ccd1;
            margin: 5px;
            text-align: center;
            cursor: pointer;
            line-height: 50px;
        }

三. 應用全屏插件:

Hello FullScreen! Click me!(first Div)