axure7.0教程_小楼作品（十三）与窗口等比缩放的矩形_window函数和元件函数

这篇axure7.0教程我要继续给大家讲Axure rp7.0中window函数的应用，上次已经给大家讲了window函数属性之一ScrollY（纵向滚动）的使用方法。那么，scrollX的使用大家也就清楚了，我也没必要再单独写一篇教程来讲，因为楼老师很懒。

本教程示例原型下载：axure7.0教程_小楼作品（十三）与窗口等比缩放的矩形.rp

今天要给大家介绍的window两个函数和两个元件函数，分别是：

1、  window.width窗口宽度

2、  window.height窗口高度

3、  元件.width元件宽度

4、  元件.height元件高度

那么，我们要做个什么效果，使用这些函数来实现呢？听我慢慢道来。

效果描述：一个矩形动态面板，随浏览器窗口的拉伸和缩小，同比放大或缩小，并且动态面板一直居中。不知道这样描述是否清楚，不清楚的话下载案例原型生成试一下就知道了。

好了，我们开始准备元件，来实现这个效果！

1、  首先我们拖入一个矩形，并转换成动态面板，添加好标签；

2、  动态面板是透明的为了展示效果我们要在动态面板里放一个与动态面板最大状态时，同样大小的矩形并填充背景色，在这个效果里我让动态面板的宽高始终为窗口的一半大小，所以矩形的宽高只要大于窗口的一般大小就可以了。

只需这样，元件就准备好了。下面我们来实现：

1、  我们知道页面打开时可能是最大化，也可能不是最大化，为了让动态面板总是窗口一半的大小，我们需要在页面加载时，添加设置动态面板尺寸的事件，也就是说要让动态面板的宽度=窗口宽度/2,高度=窗口高度/2。

2、  我们在页面加载的时候还要让动态面板的整体在窗口中居中，所以我们需要做两道数学题，来确定怎么计算居中时动态面板的X坐标值和Y坐标值。这道题怎么算呢？其实很多人马上就算出来了。X坐标值，也就是动态面板左边界的位置，就是（窗口宽度-动态面板宽度）/2；Y坐标值呢，就是动态面板上边界的位置，就是（窗口高度-动态面板高度）/2。

这样在页面加载时动态面板就会变成整个窗口1/4的大小并且位于窗口的正中。

那当窗口尺寸变化时的时间怎么来设置呢？其实，是和页面加载时的时间是一样一样的，我们只需把页面加载事件的用例复制一份，粘贴到页面大小改变时的事件里就可以了。

最后，额外说一点，实现这个效果，页面样式里不能是居中的。

好了，整个制作结束了，下面就是见证奇迹的时刻！你做对了么？

本文出自 诉客 ▪ 产品经理的心声，转载时请注明出处及相应链接。

本文永久链接: http://www.soger.net/397.html