整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
信我或關注微信號：獅范兒，回復：學習，獲取免費學習資源包。
演示效果圖：
1、全屏前
2、全屏后
html代碼：
<div class="container">
<p><em>單擊下面的按鈕將元素輸入全屏模式</em></p>
<div class="element" id="element"><p>我在全屏模式下改變顏色！</p></div>
<br />
<button onclick="var el = document.getElementById('element'); el.requestFullscreen();">
全屏!
</button>
</div>
css代碼：
.container {
margin: 40px auto;
max-width: 700px;
}
.element {
padding: 20px;
height: 300px;
width: 100%;
background-color: skyblue;
}
.element p {
text-align: center;
color: white;
font-size: 3em;
}
.element:-ms-fullscreen p {
visibility: visible;
}
.element:fullscreen {
background-color: #e4708a;
width: 100vw;
height: 100vh;
}
來源網絡，侵權聯系刪除
私信我或關注微信號：獅范兒，回復：學習，獲取免費學習資源包。
里巴巴店鋪裝修中離不開全屏輪換廣告，由于阿里店鋪裝修原配的輪換圖有點呆板，所以通過自己編寫的特效代碼來制作全屏輪換廣告還是很有必要的。
(源代碼特效觀看及代碼請在文末)
阿里店鋪裝修全屏廣告輪換效果圖
(由于畫面問題，縮放顯示了，正常寬度是 1920px或100%)
阿里店鋪裝修全屏廣告輪換html代碼
全屏廣告輪換html代碼解釋：
① 屬性的設置，這里nav(觸發切換的標簽)不使用默認，對應的是.lht_nav里面的li元素，切換的面板設置為.lht_pane，上下頁按鈕設置如圖，觸發動作設置成點擊觸發.
② li的觸發標簽個數與lht_pane面板的數量必須要一致。
阿里店鋪裝修全屏廣告輪換css代碼
全屏廣告特效css部分說明：
① 這里涉及到一個css小技巧分享，對觸發標簽容器.lht設置文本居中，然后子元素設置為display:inline-block; (內聯塊狀的意思，區別于float:left),這樣里面的小模塊就會在容器.lht里面居中了，這樣能確保觸發切換的按鈕能一直畫面中間
② 此處只是外部的箭頭圖片路徑地址
③ .disabled類是當上下頁失效(第一頁和最后一頁時)的特定類，小耐這里設置成不顯示，也可以考慮設置成透明。
阿里巴巴國內店鋪裝修的全屏廣告特效的基本代碼就如上所示，此特效實際就是基于切換組件fx.tabs變通出來的特效，部分全屏特效是可以有縮率小圖在左邊或者右邊，實際只要將觸發標簽里面的元素換成圖片即可。
由于自媒體文章避免貼出代碼展示網址，所以如果有意獲取源代碼，請訪問小耐博客獲取或閱讀原文后獲取。
我們設計使用大屏模板或大屏報表時，都會需要瀏覽器全屏展示預覽的需求，通常我們都需要通過鍵盤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頁面全屏效果 - 產品大牛網
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
