html5——全屏显示
基本概念
1、HTML5规范允许用户自定义网页上任一元素全屏显示
2、requestFullscreen() 开启全屏显示、cancleFullscreen() 关闭全屏显示
3、不同浏览器兼容性不一样
4、全屏伪类div:-ms-fullscreen，表示在全屏后的状态
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 100px;
height: 100px;
background-color: yellow;
} div:-ms-fullscreen {
width: 600px;
} div:-moz-full-screen {
height: 400px;
} div:-webkit-full-screen {
height: 400px;
}
</style>
</head>
<body>
<div></div>
<script>
var div = document.getElementsByTagName("div")[0];
div.onclick = function () {
if (this.requestFullscreen) {
this.requestFullscreen();
}
else if (this.mozRequestFullScreen) {
console.log(this.mozRequestFullScreen);
this.mozRequestFullScreen();
}
else if (this.webkitRequestFullScreen) {
console.log(this.webkitRequestFullScreen);
this.webkitRequestFullScreen();
}
}
</script>
</body>
</html>
html5——全屏显示的更多相关文章
- HTML5 全屏特性
全屏功能是浏览器很早就支持的一项功能了,可以让你页面中的video, image ,div 等等子元素实现全屏浏览,从而带来更好的视觉体验,来看看怎么使用吧.先来看看有哪些API和事件支持. API ...
- 全屏显示网页FULLSCREEN API
第一次看到应用 Fullscreen API 全屏显示网页,是 FaceBook 中的照片放大.作为一个比较新的 API,目前只有 Safari.Chrome 和 FireFox 三种浏览器支持该特性 ...
- javascript full screen 全屏显示 页面元素
javascript full screen 全屏显示 页面元素 要想让页面的某个元素全屏显示,就像在网页上看视频的时候,可以全屏观看一样,该怎么实现呢? 一种最简单的方式,就是动态改变你想要全屏显示 ...
- HTML5全屏浏览器兼容方案
最近一个项目有页面全屏的的需求,搜索了下有HTML5的全屏API可用,不过各浏览器的支持不一样. 标准 webkit Firefox IE Element.requestFullscreen() ...
- How to Use HTML5 FUll Screen API（如何使用HTML5全屏接口） 【精】
原文链接:http://www.sitepoint.com/use-html5-full-screen-api/ 如果你不太喜欢变化太快的东西,那么web开发可能不适合你.我曾在2012年末有写过Fu ...
- How to Use HTML5 FUll Screen API（怎样使用HTML5全屏接口）
原文链接:http://www.sitepoint.com/use-html5-full-screen-api/ 假设你不太喜欢变化太快的东西,那么web开发可能不适合你. 我曾在2012年末有写过F ...
- HTML5全屏操作API
一.定义:HTML5规范允许自定义网页上的任一元素全屏显示,存在兼容问题 二.使用: ①基本: Node.RequestFullScreen()开启全屏显示 Node.CancelFullScreen ...
- HTML5全屏背景视频与 CSS 和 JS（插件或库）
译文原链接:http://codetheory.in/html5-fullscreen-background-video/ 前言: 当网页载入时,自动播放的全屏背景视频已经成为当前颇受欢迎的趋势. 就 ...
- JavaScript：让浏览器全屏显示
并不是所有人都会按F11让浏览器全屏显示~~~ 一.直接上代码 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xh ...
随机推荐
- hdu 5023 线段树延迟更新+状态压缩
/* 线段树延迟更新+状态压缩 */ #include<stdio.h> #define N 1100000 struct node { int x,y,yanchi,sum; }a[N* ...
- vue.js定义一个一级的路由 ----由浅入深
#### 定义一个路由- 实例化一个路由并设置路由映射表 - 实例化里面第一个参数 routes 路由映射表 - routes 里面参数 - path 路由的路径 - component 路由对应的组 ...
- Sliding Window（滑动窗口）
Time Limit: 12000MS Memory Limit: 65536K Total Submissions: 58002 Accepted: 16616 Case Time Limi ...
- sql server 2016
https://www.microsoft.com/zh-cn/server-cloud/products/sql-server/
- vue2源码浏览分析02
1.组件初始化方法 init Vue.prototype._init = function (options) { /* istanbul ignore if */ if ("develop ...
- MAPZONE GIS SDK接入Openlayers3之二——空间参考扩展
Openlayers默认了两种空间参考,一个是EPSG4326,一个是EPSG3857,其它的空间参考需要进行扩展才能使用.所以我们初始化时进行了如下操作: 1.将配置数据库中所有的空间参考读取出来, ...
- MySQL计算字段
计算字段 数据库中存放的表是按列存放,可是有时客户机想获得的信息是若干列之间的组合,或者求和的值.这个组合或者求和的动作能够放在客户机应用程序来做.可是在数据库中实现更为高效. 这个新计算出来的结果就 ...
- 【oracle11g，18】存储结构：暂时表，手工条带化，表/索引迁移表空间，删除表，外部表
一. 暂时表 暂时表放在暂时表空间,不生成redo,仅仅有undo. 在暂时表中能够创建索引.视图及触发器,还能够使用"Export and Import(导出和导入)"或&quo ...
- JAVA高速开发平台 - 开源 免费 - JEECG
JEECG 微云高速开发平台 当前最新版本号: 3.6.2(公布日期:20160315) 下载地址:http://git.oschina.net/jeecg/jeecg 前言: 随着 WEB UI 框 ...
- Linux系统centos7+VMwareWorkstation创建共享文件夹错误解决方法集锦
在创建共享文件夹过程中出现了多种错误,多次尝试后终于解决了. 1.直接找到VMware Tools压缩包的位置:/run/media/wxy/VMware\ Tools /**省去了创建光盘挂载点:m ...