在我們設(shè)計(jì)使用大屏模板或大屏報(bào)表時(shí)迎卤，都會需要瀏覽器全屏展示預(yù)覽的需求约急，通常我們都需要通過鍵盤F11來切換瀏覽器全屏效果。但是叙凡，也發(fā)現(xiàn)了一個(gè)問題就是我們面對的很多客戶，他們并不懂F11可以全屏密末，給產(chǎn)品設(shè)計(jì)溝通帶來了不便握爷。那有沒有什么方式可以直接通過鼠標(biāo)點(diǎn)擊按鈕來切換全屏。答案是肯定有的严里，今天符號作者教大家如何利用前端的JS代碼來實(shí)現(xiàn)瀏覽器全屏效果新啼。
注意：
在看教程之前，請行了解一下刹碾，什么時(shí)javascirpt燥撞，JavaScript入門教程自行百度。當(dāng)然迷帜，今天的案例RP也會免費(fèi)提供給大家下載學(xué)習(xí)物舒，也歡迎應(yīng)用到更多的產(chǎn)品實(shí)踐中去
JavaScript介紹：
JavaScript是一種直譯式腳本語言，是一種動態(tài)類型瞬矩、弱類型茶鉴、基于原型的語言，內(nèi)置支持類型景用。它的解釋器被稱為JavaScript引擎涵叮，為瀏覽器的一部分，廣泛用于客戶端的腳本語言伞插，最早是在HTML（標(biāo)準(zhǔn)通用標(biāo)記語言下的一個(gè)應(yīng)用）網(wǎng)頁上使用割粮，用來給HTML網(wǎng)頁增加動態(tài)功能。
先預(yù)覽一下效果：
在線演示地址：https://www.pmdaniu.com/storage/120896/d6348c5cf5e4f022e5c9d02f21c49346-12007/start.html
JS代碼準(zhǔn)備：
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代碼：
最早有發(fā)過一篇《Axure生成預(yù)覽地址如何能查看到被瀏覽次數(shù)》，有教過大家耗美，Axure怎么添加JS外部代碼京髓，不懂的可以在回去看看。
步驟一：
打開Axure商架，拉取一個(gè)動態(tài)面板堰怨，創(chuàng)建2個(gè)State面板。一個(gè)面板里放一個(gè)矩形蛇摸，命名為：全屏备图。另一個(gè)命名為：退出。如圖：
步驟二：全屏交互制作
打開Axure，進(jìn)入-全屏面板揽涮，點(diǎn)擊添加鼠標(biāo)點(diǎn)擊事件抠藕，打開-當(dāng)前鏈接-fx。
將前面準(zhǔn)備好的全屏JS代碼復(fù)制到FX里保存即可蒋困。要注意的是開頭必須要加盾似。javascript:
設(shè)置面板切換效果，如圖家破，當(dāng)點(diǎn)擊時(shí)面板切換為退出面板颜说。
步驟三：退出交互制作
打開Axure，進(jìn)入-退出面板汰聋，點(diǎn)擊添加鼠標(biāo)點(diǎn)擊事件，打開-當(dāng)前鏈接-fx喊积。
同樣的將前面準(zhǔn)備好的退出全屏JS代碼復(fù)制到FX里保存即可烹困。通樣要注意的是開頭必須要加。javascript:
至此乾吻，保存文件F5預(yù)覽試試吧髓梅。教程相關(guān)文件下載：RP下載
