html自动全屏js,js实现简单页面全屏

本文实例为大家分享了js实现简单页面全屏，供大家参考，具体内容如下

全屏效果为传入div元素全屏：

代码块

js控制页面的全屏展示和退出全屏显示

#content:-webkit-full-screen {

background-color:rgb(255, 255, 12);

}

document.getElementById("btn").οnclick=function(){

var elem = document.getElementById("content");

console.log(elem);

requestFullScreen(elem);

};

function requestFullScreen(element) {

var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;

if (requestMethod) {

requestMethod.call(element);

} else if (typeof window.ActiveXObject !== "undefined") {

var wscript = new ActiveXObject("WScript.Shell");

if (wscript !== null) {

wscript.SendKeys("{F11}");

}

屏幕显示差异

这里值得注意的是Gecko和WebKit实现之间的关键区别：Gecko 会为元素自动添加 CSS 使其伸展以便铺满屏幕：“width: 100%; height: 100%”。 WebKit 则不会这么做；它会让全屏的元素以原始尺寸居中到屏幕中央，其余部分变为黑色。要在WebKit中获得相同的全屏行为，您需要添加自己的“width：100％; height：100％;” CSS规则到元素自己

#myvideo:-webkit-full-screen {

width: 100%;

height: 100%;

}

注意

如果div不设置background style则使用webkitRequestFullScreen全屏时，div会被黑色填充.

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

html自动全屏js,js实现简单页面全屏相关推荐

php jquery 全选删除,jQuery+php简单实现全选删除的方法
jQuery+php简单实现全选删除的方法发布于 2017-08-06 10:13:21 | 66 次阅读 | 评论: 0 | 来源: 网友投递 PHP开源脚本语言PHP(外文名: Hypertex ...
php全选删除,php+ajax简单实现全选删除的方法
本文实例讲述了php+ajax简单实现全选删除的方法.分享给大家供大家参考,具体如下: 删除 ↑全选checkbox ↑为删除项,同一命名class为ckb,方便操作,同时将id值巧妙的放入input ...
html页面左右滑动固定插件,jQuery全屏滚动插件fullPage.js让你的页面分屏滚动
随着扁平化风格的日益流行,越来越多的网页越来越简单但又看上去高大上,比如小米.魅族.苹果等等知名站点的新品页面,以及360.百度等网站的专题页面越来越采用分屏滚动的风格. 当然实现这种风格的方法有多种 ...
Node.js Stream(流) 简单易懂全解析
一.node.js中的流是什么 stream(流)是Node.js提供的又一个仅在服务区端可用的模块,流是一种抽象的数据结构.Stream 是一个抽象接口,Node 中有很多对象实现了这个接口.例如, ...
Android 防止白屏与华为手机欢迎页面全屏时设置背景拉伸图片
1.在drawable里面书写欢迎页面的背景splash_bg文件 <?xml version="1.0" encoding="utf-8"?> & ...
关于全屏显示，浏览器全屏、窗口/页面全屏
1.浏览器全屏 (1)全屏显示 var docElm = document.documentElement; //W3C if (docElm.requestFullscreen) { docElm. ...
自动打开html网页脚本,开启网页全屏插件(自动开启网页全屏脚本js插件)
开启网页全屏插件(自动开启网页全屏脚本js插件)是由作者陈鹏杰分享的一个浏览器扩展插件.通过本脚本,用户在网页加载完4秒后,启动网页全屏.非常简单方便快捷! 脚本描述: 在以下网页开启网页全屏 b 站 ...
安卓自动滑屏脚本_手机自动滑屏软件下载-安卓手机自动滑屏(Auto.js)下载v4.1.1 安卓免root版-西西软件下载...
安卓手机自动滑屏软件一款全新功能强大的手机应用脚本,可以更好的实现上下滑屏幕助手,免root屏幕自动滑动,编写软件.游戏脚本等一站式服务功能,需要的朋友快来下载体验吧! 安卓手机自动滑屏是什么软件手 ...
HTML期末大作业—— 游戏网页(5个页面) ~ 全屏游戏美术大赛作品征集网页 HTML+CSS+JS ~ web课程设计网页规划与设计
HTML期末大作业-- 游戏网页(5个页面) ~ 全屏游戏美术大赛作品征集网页 HTML+CSS+JS ~ web课程设计网页规划与设计临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感 ...

html自动全屏js,js实现简单页面全屏

js控制页面的全屏展示和退出全屏显示

html自动全屏js,js实现简单页面全屏相关推荐

最新文章

热门文章