[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浏览器的官网站.如果 ...
随机推荐
- github上传本地项目
github上传本地项目,分为两个部分: 1.如果建立了ssh key的,直接看第二部分的上传部分就行了 2.如果没有建立ssh key的,就从头开始看吧 ——————————————————我是快乐 ...
- 真机测试-Please enter a different string错误解决
错误原因是这个bundle ID已经被占用了,这是想到的是要重置测试证书,那么则需要去修改Bundle identifier,因为测试证书是以Bundle identifier为基准的,修改后运行,重 ...
- visual studio 2013快捷键与2012不同
升级了Visual Studio2013后发现有些快捷键不能使用,于是自己尝试设置找回,还真给发现了: 依次选择(工具-->选项-->环境-->键盘)把映射方案改成Visual C# ...
- 跨平台开发之阿里Weex框架环境搭建（一）
转载自:http://www.cnblogs.com/fozero/p/5995122.html 一.介绍 Weex是阿里今年6月份推出的跨平台解决方案,6月底正式开源.官网 https://alib ...
- python 树遍历
使用python实现的树遍历,包括宽度优先和深度优先 ef dfs(): tree = { 'A': ['B', 'C'], 'B': ['D', 'E'], 'C': ['F', 'G'], 'D' ...
- 用openvswitch配置跨节点的docker网络环境
在一篇随笔中,我们已经尝试了在不依赖工具的情况下设置docker的ip,连我都想吐槽,MD单机都这么麻烦,在多机的环境中岂不是要了我的小命! 本文就是为了多机环境中各个节点的容器通信而做的,网络拓朴如 ...
- iOS开发之CocoaPods的使用
你开发iOS的方式还是石器时代吗?在这个世界上并不是所有的软件开发人员都是码农.在这个世界上有很多的geek存在他们为这个语言的发展做出了很大的贡献.现在随着iOS开发者的曾多也就出现了iOS程序猿提 ...
- Maven基础笔记，原理
1.什么是Maven ①Maven是一款实现自动化构建的工具软件. ②构建:从源程序→程序的执行 清理→编译→测试→报告→打包→部署→执行 ③构建工具:Make→Ant→Maven→Gradle... ...
- Android Studio in OSX 提高工作效率的快捷键
前言 本篇文章参考了<倍数提高工作效率的Android Studio>一文,快捷键基于OS X系统. OS X Yosemite 10.10.5 Android Studio 1.3.1 ...
- ubuntu 13.10 mono asp.net服务 安装
ubuntu 13.10 从官方文档http://www.mono-project.com/Mod_mono 可看到 Mod_Mono is an Apache 2.0/2.2/2.4.3 modul ...