Axure页面全屏效果

无需加好友免费技术支持

当我们设计和使用大屏幕模板或大屏幕报表时，我们需要浏览器全屏显示预览。通常，我们需要使用键盘F切换浏览器全屏效果。然而，我们也发现了一个问题，我们面对的许多客户并不理解F11可以全屏，给产品设计沟通带来了不便。有没有办法通过鼠标点击按钮直接切换全屏？答案是肯定的。今天，符号作者教你如何使用前端JS实现浏览器全屏效果的代码。

注意：

看教程前，请知道什么时候javascirpt，JavaScript百度的入门教程。当然，今天的案例RP下载学习也将免费提供，欢迎应用于更多的产品实践

JavaScript介绍：

JavaScript它是一种基于原型的动态、弱、内置支持类型的直译脚本语言。它的解释器被称为JavaScript引擎，作为浏览器的一部分，广泛应用于客户端的脚本语言，最早是在HTML(标准通用标记语言下的下的应用程序)在网页上使用HTML添加动态功能的网页。

预览效果：

在线演示地址：Untitled Document

JS代码准备：

1.全屏代码:

2、退出全屏代码：

Axure添加JS代码：

最早发过一篇《Axure如何生成预览地址？ | 每个人都是产品经理，教过大家，Axure怎么添加JS外部代码，不懂可以回去看看。

步骤一：

打开Axure，拉一个动态面板，创建两个State面板。将矩形放入面板中，命名为：全屏。另一个名字是：退出。如图所示：

第二步:全屏交互制作:

打开Axure，进入-全屏面板，点击添加鼠标点击事件，打开-当前链接-fx。

前面准备好的全屏JS代码复制到FX保存它。需要注意的是，一开始必须添加。javascript:

设置面板切换效果，如图所示，点击时将面板切换为退出面板。

第三步：退出交互制作

打开Axure，进入-退出面板，点击添加鼠标点击事件，打开-当前链接-fx。

同样，准备退出前面的全屏JS代码复制到FX可以保存在里面。一般要注意的是开头一定要加。javascript:

至此，保存文件F下载教程相关文件：Axure页面全屏效果 - 产品大牛网