製作一個超簡單的全屏外掛(基於JQuery)

一. 首先,定義外掛名稱,按照JQuery外掛命名規範,命名為 jquery.fullscreen.js 程式碼如下:

/** * 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;        }

三. 應用全屏外掛:

<div class="test">Hello FullScreen! Click me!(first Div)</div><div class="test">Hello FullScreen! Click me!(second Div)</div><div class="test">Hello FullScreen! Click me!(third Div)</div><script type="text/javascript">    $(".test").click(function(){        $(this).toggleFullScreen();    });</script>