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 ...
随机推荐
- 转载 - C++ - 关于ifstream/fstream流 判断文件是否结束eof()的问题
出处:http://blog.csdn.net/shuilan0066/article/details/4669451 在做实验的时候遇到这个问题,找原因的时候发现出处除了讲明原因,还举了例子,所以记 ...
- BZOJ1452 count （树状数组）
一道比较水的二维树状数组,开100个即可,只有100种颜色还是比较EZ的. Program BZOJ1452; ; maxc=; ..maxn,..maxn,..maxc] of longint; f ...
- I - 最少拦截系统
#include<stdio.h> #include<string.h> #include<algorithm> using namespace std; ],su ...
- Nginx 重写规则指南1
作者:运维生存时间 - 默北 链接:www.ttlsa.com/nginx/nginx-rewriting-rules-guide/ 当运维遇到要重写情况时,往往是要程序员把重写规则写好后,发给你,你 ...
- win7下安装SQLSERVER2000
来自为知笔记(Wiz)
- Solidworks如何另存为和打开OBJ文件
1 点击工具-插件,勾选ScanTo3D(最好后面的启动也勾选上,否则下次启动将不会默认自动启动这个插件,还需要再做一次才能打开或者另存为OBJ) 2 注意打开零件图的方式,你不能直接打开Soli ...
- 自由宣言--《I Have a Dream》(马丁.路德.金)
I Have a Dream by Martin Luther King, Jr. I am happy to join with you today in what will go down in ...
- 躁动不安的const
就是用来恐吓你的 我能想到的,最短的.且const最多的一个语句是: int const * fun(int const*const a[],const int index)const; 而这个语句还 ...
- Andriod实现刮刮卡的效果
思想: 将一个View设计成多层,内层(包含中奖信息)和外层(用于刮奖),外层的图层用Canvas与一个Bitmap关联,用这个关联的Bitmap来处理手势的滑动.类似于刮奖的动作. 使用paint. ...
- js上传文件
一.原始的XMLHttpRequestjs上传文件过程(參考地址:http://blog.sina.com.cn/s/blog_5d64f7e3010127ns.html) 用到两个对象 第一个对象: ...