HTML5 full-screen全屏API
2017-06-16 14:58
274 查看
这篇文章纯属记录,非常感谢张鑫旭大神的demo
原文地址: http://www.zhangxinxu.com/study/201210/html5-full-screen-api.html
HTML代码:
JS代码:
原文地址: http://www.zhangxinxu.com/study/201210/html5-full-screen-api.html
代码
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="http://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("爷,现在是年轻人的时代,您就暂且休息去吧~~"); } })();
相关文章推荐
- How to Use HTML5 FUll Screen API(如何使用HTML5全屏接口)
- HTML5 API详解(1):fullscreen全屏模式
- HTML5全屏(Fullscreen)API详细介绍
- How to Use HTML5 FUll Screen API(怎样使用HTML5全屏接口)
- HTML5全屏(Fullscreen)API详细介绍_html5教程技巧
- HTML5全屏(Fullscreen)API详细介绍
- html5常用API之Full Screen
- Fullscreen API 全屏显示网页
- 全屏显示网页FULLSCREEN API
- H5 DOM 全屏 api requestFullscreen
- Fullscreen API 全屏显示网页
- Html5-VideoFullScreen 全屏处理-android
- Fullscreen API 全屏显示网页
- Fullscreen API全屏显示
- Fullscreen API 全屏显示网页
- android webview 全屏播放H5 (Playing HTML5 video on fullscreen in android webview)
- 全屏fullscreenAPI
- Fullscreen API 全屏显示网页
- 原 HTML5 requestFullScreen&exitFullscreen全屏兼容方案