html5——全屏显示

最新推荐文章于 2024-09-01 23:31:39 发布
转载 最新推荐文章于 2024-09-01 23:31:39 发布 · 244 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/wuqiuxue/p/8116978.html

基本概念

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>

 

转载于:https://www.cnblogs.com/wuqiuxue/p/8116978.html

Axure常用交互效果七——全屏效果
benleiqiang的博客
10-11 986
接下来设置两个按钮的显示与隐藏，全屏按钮隐藏——缩小按钮显示。到这里就实现了本节课的全屏效果，如有更多问题咨询私信我吧！步骤四：设置缩小按钮，载入时隐藏，单击时——设置尺寸。步骤四：叠加两个icon，结束。
HTML5新增API的使用——【网络连接、全屏显示、文件读取、地理定位】
impact_factor的博客
07-21 413
HTML5新增API的使用1、HTML5 新增API的使用：(1)检测网络连接的事件(注意浏览器的兼容性)：(2)控制页面元素的全屏显示(注意浏览器的兼容性)(3)文件读取(4)地理定位：Geolocation接口 1、HTML5 新增API的使用： (1)检测网络连接的事件(注意浏览器的兼容性)： A、‘online’：网络已连接 B、‘offline’：网络已断开 (2)控制页面元素的全屏显示(注意浏览器的兼容性) A、webkitRequestFullScreen()方法:谷歌浏览器打开全屏显示 B、
HTML5 之全屏（Full Screen API）
Jartto's Blog
06-25 538
技术日新月异，各大浏览器对 HTML5 的支持也越来越好，我们不妨大胆的使用 HTML5 API 来提升用户体验。这一节我们来看看 Full Screen API 的使用及原理。 一、使用场景1.当我们看视频的时候，为提升用户体验，可能会需要视频窗口全屏化；2.如果你恰好在对接地图业务，一张全屏的地图可能会更有视觉冲击力；3.动态展示图片或动画全屏预览；… 场景很多，但是...
html5之Fullscreen全屏API
蛐蛐的博客
09-19 1173
1.简介 在HTML5中，新增一个Fullscreen API，其作用为将页面整体或页面中某个局部区域设为全屏显示状态。 到目前为止，Firefox 10以上、Chrome 16以上、Safari 5.1以上、Opera 12以上版本的浏览器支持Fullscreen API。 2.操作全屏 <div id="a"> <div > <div>webkit</div> .
HTML5 全屏API讲解
最新发布
Jinuss的博客
09-01 1209
全网最详细的HTML5 全屏API介绍
HTML5实现全屏
weixin_34067980的博客
03-14 172
现在主流的浏览器都支持全屏，但是各家实现不一。下面是主流浏览器实现方法： // W3C 提议 element.requestFullscreen(); element.exitFullscreen(); // Webkit (works in Safari5.1 and Chrome 15) element.webkitRequestFullScreen(); element.webkitCan...
html5全屏(Fullscreen)
学习记录
03-13 4732
&lt;div class="btn-fullscreen" @click="handleFullScreen"&gt; &lt;el-tooltip effect="dark" :content="fullscreen?`取消全屏`:`全屏`" placement="bottom"&gt;
基于html5-qrcode 进行自定义（中文显示）.zip
02-13
在HTML5中，我们能够实现许多之前需要JavaScript库或Flash才能完成的功能，比如音频视频播放、离线存储、画布绘图以及今天我们要讨论的主题——二维码扫描。"基于html5-qrcode 进行自定义（中文显示）"这个项目正是...
html5全屏酷炫3D多边形背景动画特效.zip
09-27
在本资源"html5全屏酷炫3D多边形背景动画特效.zip"中，我们可以看到HTML5的一个典型应用场景——创建引人注目的视觉效果。 首先，"index.html"是任何Web页面的基础，它包含了网页的主要结构和内容。在这个项目中，`...
用HTML+CSS+JS做一个漂亮简单的游戏网页——全屏游戏美术大赛作品(4个滚动页面)
VX_WJ88950106的博客
08-12 356
🎮游戏官网、⛹️游戏网站、🕹️电竞游戏、🎴游戏介绍、等网站的设计与制作。⭐ 网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保......
html5 全屏样式,HTML5 全屏特征
weixin_39631953的博客
06-21 264
HTML5 全屏特性全屏功能是浏览器很早就支持的一项功能了，可以让你页面中的video, image ,div 等等子元素实现全屏浏览，从而带来更好的视觉体验，来看看怎么使用吧。先来看看有哪些API和事件支持。API// 元素请求全屏显示element.requestFullscreen()// 检测文档的当前状态是否允许执行全屏操作document.fullscreenEnabled()//当前...
(转)HTML5 全屏 API
weixin_34008784的博客
02-05 184
注：提 HTML5 只是说明他是一项新的东西，至于浏览器的 JavaScript API 应不应是 HTML5 的一个配套？我们不纠结。不如看这个接口能给我带来什么，思考可以如何给网页做个体验上的增强应用吧。 一、说在前面的 其实只是一个新的 JavaScript API，让 HTML 元素可以实现全屏显示。不过，这已经足够让我们兴奋。具体是怎样呢？其实这个从 iOS 和 Safari 5.0...
HTML5 之全屏方法
weixin_34111819的博客
03-22 1429
全屏方法HTML5规范允许用户自定义网页上任意元素全屏显示。元素对象.requestFullScreen() 开启全屏显示document.cancelFullScreen() 关闭全屏显示由于其兼容性原因，不同浏览器需要添加前缀如：webkit内核浏览器：webkitRequestFullScreen、webkitCancelFullScreen，如chrome浏览器。Gecko内核浏览器：mo...
HTML5全屏
阳神
02-15 415
HTML5规范允许用户自定义网页上任一元素全屏显示。 1、Node.requestFullScreen() 开启全屏显示 2、Node.cancelFullScreen() 关闭全屏显示由于其兼容性原因，不同浏览器需要添加前缀如： webkit内核浏览器：webkitRequestFullScreen、webkitCancelFullScreen，如chrome浏览器。 Gecko内核浏览器：mo...
html5 窗口全屏
lin49940的专栏
04-06 1504
这里先说明一下， 由于浏览器安全的考虑， 通过JS 打开窗口，窗口最大化或全屏 等操作是不被允许的，只有用户自己点击或输入才会允许触发这些操作。其实也不难理解为什么这样， 你想想自己以前上一些网站，里面给你弹出很多广告窗口，你希望这样吗？ 使用场景， 某业务部门的人员，会在固定的一台电脑上做事情， 这些事情在一个页面上进行，他们不会再切换其他页面了。就像ATM 或者其他终端机一样， 打开一...
全屏显示HTML,HTML5 全屏显示兼容方案
weixin_42467088的博客
06-22 513
首先来说，这个标题具有误导性，但这样设置改标题也是主要因为video使用的比较多在html5中，全屏方法可以适用于很多html标签元素，不仅仅是videohtml>全屏问题*{padding:0px;margin:0px;}bodydiv.videobox{width:400px;height:320px;margin:100pxauto;background-color:#...
html5实现网页全屏
meloseven的专栏
03-07 1541
【进入和退出全屏】// Webkit (works in Safari5.1 and Chrome 15) element.webkitRequestFullScreen(); document.webkitCancelFullScreen();// Firefox 10+ element.mozRequestFullScreen(); document.mozCancelFullScreen();
html5全屏API
FYANGFEI的博客
07-27 346
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;img id=&qu
html5 游戏不全屏显示,HTML5 的全屏显示功能
weixin_30746067的博客
06-03 336
要全屏显示窗口，如果是新窗口可以用 window.open 方法指定 "fullscreen" 参数。但是出于安全考虑，现在大多数浏览器都会在全屏时显示地址栏或者状态栏，因此只能得到伪全屏的效果。如果是当前窗口，以前并没有好办法做到，只能提醒用户按 F11 键了。目前，在 HTML5 中已经有全屏显示 API 的草案了，而且 Chrome 15，Safari 5.1 和 Firefox 10 都支...
响应式全屏幻灯片切换特效——HTML5实用指南
HTML5全屏幻灯片切换特效是一个基于HTML5开发的网页元素，它利用了HTML5的新特性如Canvas或者Video标签等，结合CSS3和JavaScript来实现一个全屏的图片或者视频幻灯片轮播展示效果。这种特效可以应用在网页设计、产品...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值