[HTML]JS全屏代码
video全屏参考：https://www.thecssninja.com/javascript/fullscreen
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JS全屏</title>
<style>
html:-moz-full-screen {background: red}
html:-webkit-full-screen {background: red}
html:fullscreen {background: red}
</style>
</head> <body>
<a href="#" onClick="fullscreen()">fullscreen</a> | <a href="#" onClick="exitFullscreen()">exitFullscreen</a>
<p id="state">no</p>
<script>
// 全屏
function fullscreen() {
var docElm = document.documentElement;
if (docElm.requestFullscreen) {
docElm.requestFullscreen();
} else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
} else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
} else if (docElm.msRequestFullscreen) {
docElm.msRequestFullscreen();
}
} // 退出全屏
function exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
} // 监听是否全屏
window.onload = function() {
var elem = document.getElementById('state');
document.addEventListener('fullscreenchange',
function() {
elem.innerText = document.fullscreen ? 'yes': 'no';
},
false);
document.addEventListener('mozfullscreenchange',
function() {
elem.innerText = document.mozFullScreen ? 'yes': 'no';
},
false);
document.addEventListener('webkitfullscreenchange',
function() {
elem.innerText = document.webkitIsFullScreen ? 'yes': 'no';
},
false);
document.addEventListener('msfullscreenchange',
function() {
elem.innerText = document.msFullscreenElement ? 'yes': 'no';
},
false);
}
</script>
</body>
</html>
[HTML]JS全屏代码的更多相关文章
- JS 全屏代码
// 推断各种浏览器,找到正确的方法 function launchFullscreen(element) { if(element.requestFullscreen) { element.requ ...
- JS全屏漂浮广告、移入光标停止移动
点击这里查看效果 以下是代码: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Ty ...
- 关于最近在做的一个js全屏轮播插件
最近去面试了,对方要求我在一个星期内用原生的js代码写一个全屏轮播的插件,第一想法就是跟照片轮播很相似,只是照片轮播是有定义一个宽高度大小已经确定了的容器用来存储所有照片,然后将照片全部左浮动,利用m ...
- 基于Ascensor.js全屏切换页面插件
今天给大家分享一款基于Ascensor.js全屏切换页面插件,这款实例 适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览 ...
- 基于js全屏动画焦点图幻灯片
今天给大家分享一款基于js全屏动画焦点图幻灯片.这款焦点图内的内容以动画形式出现和消失.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class="sl ...
- 天猫装修-全屏代码，和去掉10px
淘宝装修,不支持float,和position属性 全屏代码 <div style="height:685px;"> <div style="paddi ...
- 兼容IE浏览器的js浏览器全屏代码
众所周知,IE是个奇葩的浏览器,但是由于用户量很大,开发者还是不得不为IE考虑一下,于是,各种浏览器相关的操作,都要多一个特别的判断——专门针对IE浏览器的判断,这里的全屏也不例外.看代码: func ...
- fullpage.js全屏滚动插件使用小结
刚做好公司网站,通过全屏滚动,显著提高了官网的浏览体验.遂总结一下使用fullpage.js的方法.欢迎指正 一. fullpage.js简介 fullpage.js是一套实现浏览器全屏滚动的js插件 ...
- FullPage.js全屏滚动插件学习总结
如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次.比如 iPhone 5C 的介绍页面(查看),QQ浏览器的官网站.如果 ...
随机推荐
- h5的拖放（drag和drop）
被拖曳元素发生的事件=== ondragstart:拖拽元素开始被拖拽的时候触发 ondragend:拖拽完成后触发 目标元素发生的事件=== ondragenter:拖曳元素进入目标元素的时候触发 ...
- [mobi文件格式详细介绍一]_[资料篇]
Amazon 收购 Mobipocket 于 2005年3月: Kindle 第一版于2007发布,mobi成为其系统支持的电子格式之一,mobi是由kindle带动发展起来的; 有人问Amazon为 ...
- ios 利用airprint实现无线打印（配合普通打印机）
很多时候,我们不可能为了一个打印功能而去替换打印机,来支持无线打印. 找了很久,终于找到了一种解决方案,来适应大多数没有带wifi功能的打印机支持无线打印. 前提: 有wifi路由器:因为手机要打印, ...
- Inno Setup怎样创建一个自动申请管理员身份运行的快捷
如果你使用的是 Unicode 版本的 Inno Setup,那么以下是更为专业的解决方法. 这是 mlaan 提及的再一种方法. QUOTE( CodeAutomation3.iss) ...
- AVL的删除写法的一个错误
今天在写AVL删除的时候犯了一个傻逼错误,调了很久,教训惨痛,引以为鉴. 树中允许有重复节点,如果删除的节点有重复,则只删除1个. AVL删除采取的方法是首先判断待删除节点是否存在,如果存在,那么判断 ...
- maven 记录
1. Can't find parent: 工程中的pom.xml中定义的”project -> version”或者”parent project -> version”设置的不对导致 ...
- Android Event
2016-10-11 http://p.codekk.com/detail/Android/wcy10586/androidEvent https://my.oschina.net/u/191330/ ...
- deepin gala窗口管理器关闭动画
deepin中有两个管理器,一个基于metacity,另一个基于gala,可以用super+tab来进行切换.metacity是不带动画的,而 gala是带动画效果的.但这里有个问题,不知道有些同学上 ...
- Win7系统安装好Axure点击运行报.NET Framework4.0未安装的解决办法
1:问题 由于工作需要,需要研究一下Axure原型设计软件的使用方式,在公司的电脑上成功安装了从同事那里拿来的Axure7.0软件,能够正确运行没有任何问题,在自己的电脑上安装的也非常顺利,不过运 ...
- linux基础学习
1.默认不写端口号的就是80端口 本地ip:localhost或者127.0.0.1 2.用户管理 id和whoami:可以查看当前用户 who和w查看当前已经登录的用户 (1)添加用户,用户默认的家 ...