1. 首页
  2. 教程
  3. 高级教程

【Axure JS】Axure引用JS案例-全屏与退出全屏(案例下载)

本教程主要讲解在Axure中如何引用JS代码,实现全屏与退出全屏的功能

预览地址:

https://www.fleede.com/axure/axureschool/JS-FullScreen/

主要操作步骤:

1、拖入一个按钮,文字改为【全屏】

2、选中按钮,新建交互动作:单击时-打开链接–链接到URL或文件路径

【Axure JS】Axure引用JS案例-全屏与退出全屏(案例下载)

3、点击fx,出现编辑值弹出框

【Axure JS】Axure引用JS案例-全屏与退出全屏(案例下载)

4、将设置为全屏的JS代码复制到函数区域,JS代码如下:

javascript:
function requestFullScreen(element) {
    var de = document.querySelector(element) || document.documentElement;
    if (de.requestFullscreen) {
        de.requestFullscreen();
    } else if (de.mozRequestFullScreen) {
        de.mozRequestFullScreen();
    } else if (de.webkitRequestFullScreen) {
        de.webkitRequestFullScreen();
    }
}
requestFullScreen();

5、同理,按照同样的方式设置【退出全屏】按钮,退出全屏的JS代码如下:

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();

6、点击预览查看效果

默认/退出全屏效果

【Axure JS】Axure引用JS案例-全屏与退出全屏(案例下载)

全屏效果

【Axure JS】Axure引用JS案例-全屏与退出全屏(案例下载)

以上为主要的操作步骤,可实现全屏与退出全屏的功能,根据各自需求可自行设计不同的样式和场景

原型下载

立即下载

访问密码:8397

原创文章,作者:院长大大,如若转载,请注明出处:http://www.axureschool.cn/291111.html

发表评论

登录后才能评论

联系我们

在线咨询:点击这里给我发消息

邮件:fleede@163.com

工作时间:周一至周五,9:30-18:30,节假日休息