Javascript全屏模式的切换

务8：全屏模式的切换。

这张就是第八，第八小姐就是讲关于全屏模式的切换。回到页面，希望有个按钮，一点全屏娱乐模式，这一点就切换回来。可能我个人不太喜欢这种模式，但有的人会用，还是把它设计进去。

然后就在这个地方加一个图标，有空再找一下。找了一个图标，就找这个。jump through screen one，这有了吗？有了，还挺好。然后就稍小了一点，再给它大一点，size，就不要说是二十，可以。点它，现在没效果，来做这个效果。

首先给它定一个变量叫is war screen，是不是全屏的？它肯定是响应数据了，i e f，它不是默认，当然响应数据这边可以给它添类型，比如它是birch，填birch。如果它不是，还找一个相对的，跟它相反的按钮，收回来的按钮，就用这个。

off for screen one，就这个，给它来复制一下，把它放松，就是衣服regan in the first three，如果它真的，就显示上面的，否则就显示下面的。来看一下，这边有一个方法，就这样可以，可能还做其他的，记得就给它定一个top切换螺丝功能，它是一个，然后再调整这个方法就行了。

就要投screen，点，没效果，为啥没效果？是不是点错了？这边点这上面，再说下面一个，放到枪上，点，看有切换效果了。怎么样给它切换？这个是节食里面固定的方法，如果它的值，直接给它切换，就是document，the element，点a request，press greet plug，就是全屏切换。

这里切换了，这点没效果只按a xe，所以这边也不对，所以希望它变成这个时候就把它缩回来，这边就要做一个判断了，就是来判断它是不是已经缩放了，如果它已经是展开了，就把它缩回来，也是，这个就退出，否则就把它删远，就简单的删远，删除就可以了。

试一下，点，点，回来了，点，点，再配合原来的一点，就全屏显示了，舒服了，点回来。这一章就讲完了，就把页面布局都弄好了，包括动态生成菜单页，浏览历史页，面包穴导航，把整个布局就全做好了。

下一张开始做具体业务了，首先叫做用户的登录，注册新用户，还有一个重置密码。这节课就讲到这里，拜拜。

色大气全屏背景通用登录页面html模板是一款适用于PC端和手机端的登录界面模板、APP登录界面模板。现在就业非常重要的一个项目你准备好了吗？下午小编教你从无到有的敲代码敲出自己博客最重要的项目高薪就业轻松2倍。

项目源代码：

<!DOCTYPE html>
<html lang="en">
<head>
<title>蓝色登录界面HTML代码</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
 
<!--图标样式-->
<link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">
 
<!--布局框架-->
<link rel="stylesheet" type="text/css" href="css/util.css">
 
<!--主要样式-->
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
 
<body>
 
 <div class="limiter">
 <div class="container-login100" style="background-image: url('images/img-01.jpg');">
 <div class="wrap-login100 p-t-190 p-b-30">
 <form class="login100-form validate-form">
 <div class="login100-form-avatar">
 <img src="images/avatar-01.jpg" alt="AVATAR">
 </div>
 
 <span class="login100-form-title p-t-20 p-b-45">Hello</span>
 
 <div class="wrap-input100 validate-input m-b-10" data-validate="请输入用户名">
 <input class="input100" type="text" name="username" placeholder="用户名" autocomplete="off">
 <span class="focus-input100"></span>
 <span class="symbol-input100">
 <i class="fa fa-user"></i>
 </span>
 </div>
 
 <div class="wrap-input100 validate-input m-b-10" data-validate="请输入密码">
 <input class="input100" type="password" name="pass" placeholder="密码">
 <span class="focus-input100"></span>
 <span class="symbol-input100">
 <i class="fa fa-lock"></i>
 </span>
 </div>
 
 <div class="container-login100-form-btn p-t-10">
 <button class="login100-form-btn">登 录</button>
 </div>
 
 <div class="text-center w-full p-t-25 p-b-230">
 <a href="#" class="txt1">忘记密码？</a>
 </div>
 
 <div class="text-center w-full">
 <a class="txt1" href="#">
 立即注册
 <i class="fa fa-long-arrow-right"></i>
 </a>
 </div>
 </form>
 </div>
 </div>
 </div>
 
 <script src="vendor/jquery/jquery-1.12.4.min.js"></script>
 <script src="js/main.js"></script>
 
</body>
</html>

代码运行效果截图

大家需要这个项目css代码，js，图片做练习的可以找我免费领取，如果大家不怕麻烦可以关注我后私信我“前端学习资料”几个字找我领取 24小时在线！

我们设计使用大屏模板或大屏报表时，都会需要浏览器全屏展示预览的需求，通常我们都需要通过键盘F11来切换浏览器全屏效果。但是，也发现了一个问题就是我们面对的很多客户，他们并不懂F11可以全屏，给产品设计沟通带来了不便。那有没有什么方式可以直接通过鼠标点击按钮来切换全屏。答案是肯定有的，今天符号作者教大家如何利用前端的JS代码来实现浏览器全屏效果。

注意：

在看教程之前，请行了解一下，什么时javascirpt，JavaScript入门教程自行百度。当然，今天的案例RP也会免费提供给大家下载学习，也欢迎应用到更多的产品实践中去

JavaScript介绍：

JavaScript是一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

先预览一下效果：

在线演示地址：Untitled Document

JS代码准备：

1、全屏代码：

javascript：
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}");
}
}
};
requestFullScreen(document.documentElement);

2、退出全屏代码：

javascript：
function exitFull() { 
var exitMethod = document.exitFullscreen || 
document.mozCancelFullScreen || 
document.webkitExitFullscreen || 
document.webkitExitFullscreen; 
if (exitMethod) {
exitMethod.call(document);
} else if (typeof window.ActiveXObject !== "undefined") {
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
};
exitFull();

Axure添加JS代码：

最早有发过一篇《Axure生成预览地址如何能查看到被浏览次数 | 人人都是产品经理》，有教过大家，Axure怎么添加JS外部代码，不懂的可以在回去看看。

步骤一：

打开Axure，拉取一个动态面板，创建2个State面板。一个面板里放一个矩形，命名为：全屏。另一个命名为：退出。如图：

步骤二：全屏交互制作

打开Axure，进入-全屏面板，点击添加鼠标点击事件，打开-当前链接-fx。

将前面准备好的全屏JS代码复制到FX里保存即可。要注意的是开头必须要加。javascript：

设置面板切换效果，如图，当点击时面板切换为退出面板。

步骤三：退出交互制作

打开Axure，进入-退出面板，点击添加鼠标点击事件，打开-当前链接-fx。

同样的将前面准备好的退出全屏JS代码复制到FX里保存即可。通样要注意的是开头必须要加。javascript：

至此，保存文件F5预览试试吧。教程相关文件下载：Axure页面全屏效果 - 产品大牛网

在线咨询

上一篇：HTML5特效库 jQuery全屏焦点图滑动切换源码
下一篇：插电混动汽车+html页面中如何引入html

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

Javascript全屏模式的切换

项目源代码：

代码运行效果截图

您的项目需求