html5全屏测试,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代码：

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("爷，现在是年轻人的时代，您就暂且休息去吧~~");

}

})();