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全屏模式的切換

項目源代碼：

代碼運行效果截圖

您的項目需求