Axure实战20:使用Axure和JavaScript实现浏览器FullScreen全屏效果

·  阅读 735
Axure实战20:使用Axure和JavaScript实现浏览器FullScreen全屏效果

在本章中,你将学会使用Axure和JavaScript实现浏览器全屏效果。

项目背景

在B端或G端产品设计中,我们常常会接触到数据分析中台页面的设计。为了更好地展示数据分析的效果及给予用户更好的体验,覆盖式全屏展示模式成为一些大屏数据分析页面或者报表的首选。

那么本章中,我们将学习如何使用Axure和JavaScript实现浏览器全屏效果。

项目搭建

首先,创建一个新项目,命名为FullScreen。

1.png

页面样式-示例页面

我们拿一个数据分析页面作为示例页面。

2.png

示例页面也比较简单。

我们加了背景颜色#F0F2F5作为底色,然后拖入了一些矩形组件,修订了矩形的圆角,让卡片视图看起来没有那么锐利。

排布好卡片视图后,接着我们使用了第三方提供的图标库渲染页面。

我们在浏览器中预览下效果,PS:数据仅作为展示效果,不含其他业务逻辑。

3.png

页面样式-全屏按钮

接下来,我们来完成全屏的操作。

全屏的操作分为两部分:全屏展开、收起全屏。当我们点击全屏的时候,页面全屏时,全屏的按钮需要变成收起按钮;而我们收起全屏时,收起按钮需要变成全屏按钮。

基于这个页面逻辑,我们使用动态面板,设置两个状态,每个状态中放置一个按钮,点击时切换到另一个状态。

4.png

交互动作-全屏

页面样式完成后,我们来实现下交互动作,这里我们需要引用到两段JavaScript代码。

/*展开全屏*/

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);
复制代码

我们来看下javascript代码。

Element.requestFullscreen()方法用于异步请求,使得Element(元素)全屏显示。

然后需要这个请求支持谷歌(webkit)、火狐浏览器(moz)、IE浏览器(ms)的内核,如果请求成功就发出异步请求实现元素全屏显示。

收起全屏的代码也差不多的逻辑。

/*收起全屏*/

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}");
            }
        }
    };
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();
复制代码

我们需要分别给展示全屏按钮、收起全屏按钮加入交互动作。

在“单击时”交互中,选择“打开链接”,选择“链接到URL或文件路径”,点击fx打开编辑弹窗,将JavaScript代码复制进去。

值得注意的一点是,一定要点击fx打开弹窗,在弹窗中复制,不然可能会因为格式排版问题造成不必要的错误。

5.png

项目预览

完成后,我们在浏览器中预览下效果。

6.png

当我们点击全屏的时候,页面全屏,并且全屏按钮变成收起,点击收起按钮,页面收起,收起按钮变成全屏。

哈哈哈,效果不错!

为了让这个项目能够公开访问,我们可以生成html文件,然后发布到gitHub或者gitee中,这样就可以将网站分享给朋友们了。

项目地址

FullScreen全屏: ricardowesley.gitee.io/fullscreen

快来动手试试吧!

如果本专栏对你有帮助,不妨点赞、评论、关注~

分类:
开发工具
收藏成功!
已添加到「」, 点击更改