Axure新手养成计划(连载28)

Axure书籍 小楼一夜听春语 14882℃ 0评论

2.2.  固定

动态面板的属性中有个功能,叫“固定到浏览器”,这个功能也可以在动态面板的右键菜单中选择。

如果我们希望页面上的某个部分,在页面滚动时保持在原位不动,就需要用到“固定到浏览器”的这个功能。

比如,一个“返回顶部“的按钮一直固定在页面右下方,距离浏览器右边框100像素和下边框10像素的位置上。点击这个按钮时,整个页面滚动回顶部。这样的效果就需要用到上面提到的功能。

其实,“固定到浏览器“这个功能,并不是把元件在绝对位置固定,它是相对于浏览器的固定,对于页面来说其实元件是在随着页面的滚动而反向移动,形成了一个停留在原位置的视觉效果。所以它是相对固定,相对于浏览器边框的固定。

知道了原理,我们来实现上面说到的这个效果。

案例:固定位置的返回顶部按钮

首先,我们先完成固定按钮位置。(图151)

1、我们先搭建一个简易的页面,然后放入一个矩形,改成箭头样式,并“转为动态面板“,命名为”back“。

2、点击动态面板属性中的“固定到浏览器“,打开设置界面;

3、勾选“固定到浏览器窗口“的复选框,开启设置选项;

4、水平固定中选择“右“,并设置边距为”100“px;

5、水平固定中选择“底部“,并设置边距为”10“px。

151

(图151)

然后,添加“返回顶部“按钮【鼠标单击时】事件的用例动作;因为当前动态面板中只有一个元件,所以【鼠标单击时】的事件可以用矩形也可以用动态面板。这里我们使用动态面板的触发事件。

如果要滚动回顶部,我们需要用一个元件在顶部进行位置定位,滚动时滚动到这个元件的位置上。页面中,有一个文字为“顶部导航“的占位符元件,它的y轴坐标为”0“,就是在顶部的位置,我们就用它进行顶部位置的定位。

我们为“顶部导航“这个元件命名为”top“,并在用例编辑界面中选择动作”滚动到元件<锚链接>“后,勾选这个元件。在接下来的选项中我们勾选”仅垂直滚动“,如果需要滚动回顶部时有动态的效果,可以继续选择【动画】中的”线性“效果,时间为默认的”500“毫秒即可。这样就是一个500毫秒匀速滚动回顶部的效果。(图152)

152

(图152)


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

小楼老师再出新作,倾力打造Axure RP 8精品课程系列,以最短的时间高效完成学习目标,入门进阶与实战案例并重,是0基础的新手从入门到精通的必备课程。

《AxureRP 8 入门与实战 - 入门篇》------从零入门进阶的最佳课程------【点此查看详情】

《AxureRP 8 入门与实战 - 案例篇》------实战手册图书的同步视频------【点此查看详情】


转载请注明:Axure原创教程网 » Axure新手养成计划(连载28)

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

表情

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

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(5)个小伙伴在吐槽
  1. 测试了一下本文的流程貌似在火狐和chrome上都没反应
    sutrong2015-11-18 10:36 回复
    • chrome表示有反应~~~
      锵锵2015-11-18 17:19 回复
  2. 楼老师:5.水平固定中选择“底部“,并设置边距为”10“px。 中“水平”应该是纵向吧。
    dk2016-03-14 14:40 回复
  3. 楼老师,是仅水平滚动吧!!!?
    桐哥儿2016-04-18 17:10 回复
  4. 为什么我侧边栏长度长的时候 固定在浏览器预览的时候 侧边栏就不能完整显示?
    小小羊2016-12-05 13:54 回复