[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浏览器的官网站.如果 ...
随机推荐
- sqlserver和Oracle内部的错误数据修复（DBCC、DBMS_REPAIR）
数据库长时间运行后,因断电.操作系统.物理存储等的原因可能会造成数据库内部的逻辑或物理错误,我们可以使用一般的方式尝试修复. 对于sqlserver 我们可以使用DBCC命令: -- sqlserve ...
- apache 使用 .htaccess 导致500错误
今天在win主机上配置了一个apache+mysql+php 的环境,一切看似正常了.结果将程序转移过来,打开网站的时候,出现了500错误.于是乎查原因: 首先,怀疑的是连接mysql出错了,找出配置 ...
- 为模版设计师而生的Twig（上）-Twig使用指南
原文地址:http://my.oschina.net/veekit/blog/268828 1. 概要 模板是一个简单的文本文件.它可以生成任何基于文本的格式(HTML.XML.CSV等).它不具有特 ...
- Mysql的row_format
在mysql中, 若一张表里面不存在varchar.text以及其变形.blob以及其变形的字段的话,那么张这个表其实也叫静态表,即该表的row_format是fixed,就是说每条记录所占用的字节一 ...
- SQL语句之备份表
SELECT INTO 语句:表示从一个表中选取数据,然后把数据插入另一个表中,常用来备份一张表 1.全表结构备份: SELECT * INTO new_table_name FROM old_tab ...
- git学习2：版本库
创建版本库 版本库,又称仓库,英文名为repository,版本库内的所有文件都可以被Git管理起来,即每个文件的修改.删除,Git都能跟踪. 1,在目录中创建版本库 在目录中有两种创建版本库的方法, ...
- python 获取当前目录下文件(转)
今天继续整理原来写的 python 代码,下面是获取文件信息的 python 处理代码. 获取指定目录下文件的文件名以及文件的数量,然后列出其中还存在的目录名称: #!/usr/bin/env pyt ...
- dubbo简单demo
zookeeper,可以集群,可以只安装一台 依赖dubbo jar, zkclient等 发布服务 <?xml version="1.0" encoding=" ...
- 02-C#入门（枚举、结构等）
不要为了写笔记而学习!!! 其实学完一章再返回复习,然后做笔记,真的很费时间(电子书还不方便).当然,复习带来的价值,是值得花时间的. 枚举.结构 枚举的类型有限(short.byte...)且是相同 ...
- PHP类型转换
php代码 <?php$foo = "0"; // $foo 是字符串 (ASCII 48)var_dump($foo) ; echo '<br/>'; $foo ...