利用Axure rp实现页面部分区域的悬浮效果

在网站中经常见到有一块区域处于悬浮状态，单击它就会滚动到指定位置。接下来介绍如何在Axure rp中实现此效果。

创建顶部和底部矩形元件

首先，在Axure rp中用鼠标拖一个矩形元件到画布中，命名为top，设置宽度为700，高度为100，并添加文字“顶部”。同样的方法设置一个底部矩形元件。

创建向上和向下箭头

接下来，拖动两个矩形元件，并调整其中一个元件的方向，使其呈现向下的三角形形状。

设计效果

完成上述步骤后，你将看到设计后的效果。

设置鼠标单击事件

选中向上箭头上方的热区元件，给它添加鼠标单击时触发的事件。

设置滚动到元件锚链接

在用例编辑窗口中，选择“滚动到元件锚链接”，并在右侧的元件列表中选择top矩形元件，并勾选“仅垂直滚动”。完成后点击确定。

设置向下箭头事件

同样的步骤，拖动一个热区元件放在向下箭头的上方，并进行事件设置。

转换为动态面板

同时选中向上箭头和向下箭头，右键点击选择“转换为动态面板”，并对动态面板进行属性设置。

固定到浏览器

选中动态面板，右键点击选择“固定到浏览器”，并进行相应的属性设置。

预览设计效果

按下F5键进行设计效果的预览。你会发现通过点击向上箭头可以滚动到页首，而点击向下箭头则可以滚动到页尾。

版权声明：本文内容由互联网用户自发贡献，本站不承担相关法律责任.如有侵权/违法内容,本站将立刻删除。