制作一个超简单的全屏插件(基于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>