1. 首頁 > 生活 > >

谷歌瀏覽器安裝axure插件 axure谷歌瀏覽器插件

小知識



文章插圖
谷歌瀏覽器安裝axure插件 axure谷歌瀏覽器插件

文章插圖
在我們設計使用大屏模板或大屏報表時，都會需要瀏覽器全屏展示預覽的需求，通常我們都需要通過鍵盤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:
【谷歌瀏覽器安裝axure插件 axure谷歌瀏覽器插件】至此，保存文件F5預覽試試吧 。