HTML5 full-screen全屏API测试实例页面

展示

代码

CSS代码：

.full {
    text-align: center;
    cursor: pointer;
}

.full img {
    vertical-align: middle;
}

.full:hover img {
    box-shadow: 2px 2px 4px rgba(0,0,0,.45);
}

.full:after {
    /* 图片垂直居中显示 */
    display: inline-block;
    content: '';
    width: 0;
    height: 100%;
    vertical-align: middle;
}

:-webkit-full-screen img    { height: 60%; }
:-moz-full-screen img       { height: 60%; }
:-ms-full-screen img        { height: 60%; }
:-o-full-screen img         { height: 60%; }
:full-screen img            { height: 60%; }
            

HTML代码：

<div class="full" title="点击全屏浏览"><img src="//image.zhangxinxu.com/image/study/s/s512/mm1.jpg" /></div>  
            

JS代码：

(function() {
    var runPrefixMethod = function(element, method) {
        var usablePrefixMethod;
        ["webkit", "moz", "ms", "o", ""].forEach(function(prefix) {
            if (usablePrefixMethod) return;
            if (prefix === "") {
                // 无前缀，方法首字母小写
                method = method.slice(0,1).toLowerCase() + method.slice(1);
                
            }
            
            var typePrefixMethod = typeof element[prefix + method];
            
            if (typePrefixMethod + "" !== "undefined") {
                if (typePrefixMethod === "function") {
                    usablePrefixMethod = element[prefix + method]();
                } else {
                    usablePrefixMethod = element[prefix + method];
                }
            }
        });
        
        return usablePrefixMethod;
    };
    
    if (typeof window.screenX === "number") {
        var eleFull = document.querySelector(".full");
        eleFull.addEventListener("click", function() {
            if (runPrefixMethod(document, "FullScreen") || runPrefixMethod(document, "IsFullScreen")) {
                runPrefixMethod(document, "CancelFullScreen");
                this.title = this.title.replace("退出", "");
            } else if (runPrefixMethod(this, "RequestFullScreen")) {
                this.title = this.title.replace("点击", "点击退出");
            }
        });
    } else {
        alert("爷，现在是年轻人的时代，您就暂且休息去吧~~");
    }
})();