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

AxureRP7.0教程 小楼一夜听春语 35569℃ 0评论

这篇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。

13-1

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

13-2

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

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

13-3

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

13-4

好了,整个制作结束了,下面就是见证奇迹的时刻!你做对了么?


~~~~~~~~~~~~ 正文结束 下面没了 ~~~~~~~~~~~~

小楼老师全新打造Axure RP 9精品课程,以独有的教学方法与技巧,帮助你以最短的时间高效的完成学习目标。

《Axure RP 9 萌新修炼视频》-----从零入门进阶的优质课程------【点此查看详情】


转载请注明:Axure原创教程网 » axure7.0教程_小楼作品(十三)与窗口等比缩放的矩形_window函数和元件函数

喜欢 (9)or分享 (0)
头像
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(12)个小伙伴在吐槽
  1. 头像
    窗口尺寸变化后,会自动出现滚动条,动态面板尺寸未变呐。
    哎哟喂2013-10-10 11:16 回复
    • 小楼一夜听春语
      在属性里隐藏滚动条
      小楼一夜听春语2013-10-10 11:31 回复
  2. 头像
    楼哥什么时候出个表格的教程,翘首以盼
    yurifire2014-01-15 11:16 回复
  3. 头像
    123
    小楼老师好2014-05-27 17:00 回复
  4. 头像
    如何实现里面的动态面板里德元件宽度和高度也随着窗口变化?
    二位2015-04-03 10:05 回复
    • 小楼一夜听春语
      实现不了
      小楼一夜听春语2015-04-03 18:28 回复
  5. 头像
    小楼老师:你好 我安装的是7.0的版本,选择矩形元件,为何在元件属性与样式中没有找到文本框类型这一栏目呢?盼复,谢谢!
    小蕾2015-08-07 09:57 回复
    • 头像
      文本框有单独的元件。
      风间2015-09-30 08:39 回复
  6. 头像
    动态面板是按比例缩小了,可以里面的内容只能看到一部分了,只能看到动态面板缩小后里面的内容,这怎么是好???
    owen2016-04-22 20:59 回复
  7. 头像
    把前面的函数计算方式调整一下就能用页面居中的选项了吧
    Wex2017-11-27 16:54 回复
  8. 头像
    请问window.width可以通过原件改变当前窗口大小吗?
    change2018-07-05 10:34 回复
    • 小楼一夜听春语
      见过网页能够改变浏览器窗口大小的吗?
      小楼一夜听春语2018-07-05 19:19 回复