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 ...
随机推荐
- （15）MOG背景减少
1.根据上一帧找出变化的东西(如行走的人),消除背景,即不变的东西 motion detection 2.存在自身移动时的噪声和周围物体缓慢移动的噪声(这里播放的视频,我不断移动,背景可能有轻微的 ...
- 进入DRF和ANGULAR的整合学习，这三篇入门内容一定要学好的
看来,DJANGO的模板功能是无法用啦, 学着用ANGLUAR的SERVICE,MODULE,CONTROLLER啦... http://engineroom.trackmaven.com/blog/ ...
- C. Painting Fence 分治
memory limit per test 512 megabytes input standard input output standard output Bizon the Champion i ...
- NOIP2013 提高组合集
NOIP 2013 提高组 合集 D1 T1 转圈游戏 快速幂裸题 #include <iostream> #include <cstdio> #include <cst ...
- Clojure: 寻找项目依赖项目
Clojure寻找项目依赖项目: lein deps :tree
- [Vue-rx] Disable Buttons While Data is Loading with RxJS and Vue.js
Streams give you the power to handle a "pending" state where you've made a request for dat ...
- 关于System.Convert那些事
关于System.Convert那些事 前言 不知咋的,今天腰疼的不行,疼的站不起来了,今下午突然就疼起来了,唉,这是身体要垮了的节奏啊,再加上自己的VAX试用期到了,弄了半天也不行,烦. 正文 看到 ...
- 装饰者模式的学习（c#） EF SaveChanges() 报错（转载） C# 四舍五入 保留两位小数（转载） DataGridView样式生成器使用说明 MSSQL如何将查询结果拼接成字符串 快递查询 C# 通过smtp直接发送邮件 C# 带参访问接口，WebClient方式 C# 发送手机短信 文件 日志 写入 与读取
装饰者模式的学习(c#) 案例转自https://www.cnblogs.com/stonefeng/p/5679638.html //主体基类 using System;using System.C ...
- 玩转iOS开发 - 视图控制器生命周期
视图控制器生命周期
- Android开发之利用SQLite进行数据存储
Android开发之利用SQLite进行数据存储 Android开发之利用SQLite进行数据存储 SQLite数据库简单介绍 Android中怎样使用SQLite 1 创建SQLiteOpenHel ...