<acronym id="p33pj"><strong id="p33pj"></strong></acronym>
  • <p id="p33pj"><strong id="p33pj"></strong></p>
    <track id="p33pj"></track><td id="p33pj"></td>
    <p id="p33pj"></p>
  • <pre id="p33pj"><ruby id="p33pj"></ruby></pre>

      1. <p id="p33pj"></p>
        axure商城

        Axure教程:通過引用前端JS代碼實現瀏覽器全屏效果

        在我們設計使用大屏模板或大屏報表時,都會需要瀏覽器全屏展示預覽的需求,通常我們都需要通過鍵盤F11來切換瀏覽器全屏效果。但是,也發現了一個問題就是我們面對的很多客戶,他們并不懂F11可以全屏,給產品設計溝通帶來了不便。那有沒有什么方式可以直接通過鼠標點擊按鈕來切換全屏。答案是肯定有的,今天符號作者教大家如何利用前端的JS代碼來實現瀏覽器全屏效果。

        注意:

        在看教程之前,請行了解一下,什么時javascirpt,JavaScript入門教程自行百度。當然,今天的案例RP也會免費提供給大家下載學習,也歡迎應用到更多的產品實踐中去

        JavaScript介紹:

        JavaScript是一種直譯式腳本語言,是一種動態類型、弱類型、基于原型的語言,內置支持類型。它的解釋器被稱為JavaScript引擎,為瀏覽器的一部分,廣泛用于客戶端的腳本語言,最早是在HTML(標準通用標記語言下的一個應用)網頁上使用,用來給HTML網頁增加動態功能。

        先預覽一下效果:

        在線演示地址》》

        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,拉取一個動態面板,創建2個State面板。一個面板里放一個矩形,命名為:全屏。另一個命名為:退出。如圖:

        步驟二:全屏交互制作

        打開Axure,進入-全屏面板,點擊添加鼠標點擊事件,打開-當前鏈接-fx。

        將前面準備好的全屏JS代碼復制到FX里保存即可。要注意的是開頭必須要加。javascript:

        設置面板切換效果,如圖,當點擊時面板切換為退出面板。

        步驟三:退出交互制作

        打開Axure,進入-退出面板,點擊添加鼠標點擊事件,打開-當前鏈接-fx。

        同樣的將前面準備好的退出全屏JS代碼復制到FX里保存即可。通樣要注意的是開頭必須要加。javascript:

        至此,保存文件F5預覽試試吧。教程相關文件下載:RP下載

        給TA打賞
        共{{data.count}}人
        人已打賞
        高級教程

        如何利用中繼器和動態面板制作一個可以自動化菜單?

        2021-10-25 21:29:56

        產品經理基礎教程高級教程

        用axure做出交互高保真原型之:文字輸入超出限制輸入的交互效果

        2022-1-6 12:27:48

        axure商城
        0 條回復 A文章作者 M管理員
          暫無討論,說說你的看法吧
        ?
        個人中心
        購物車
        優惠劵
        今日簽到
        有新私信 私信列表
        搜索
        国产亚洲日韩在线a不卡
        <acronym id="p33pj"><strong id="p33pj"></strong></acronym>
      2. <p id="p33pj"><strong id="p33pj"></strong></p>
        <track id="p33pj"></track><td id="p33pj"></td>
        <p id="p33pj"></p>
      3. <pre id="p33pj"><ruby id="p33pj"></ruby></pre>

          1. <p id="p33pj"></p>