Axure rp怎么实现页面部分区域悬浮效果?

在网站中经常见到有一块区域处于悬浮状态,单击它就会滚动到指定位置,该怎么实现这个效果呢?下面我们就来看看Axure rp制作悬浮页面的教程。

软件名称:
Axure RP 9 V9.0.0.3611 汉化安装版(附汉化包)
软件大小:
112MB
更新时间:
2018-10-29

1、用鼠标拖一个矩形元件到画布中,命名为top,宽为700,高为100,文字为顶部;同样的设置一个底部矩形元件

Axure rp怎么实现页面部分区域悬浮效果?_第1张图片

2、拖两个矩形元件,点矩形元件中的黑圆点,选三角形。第二个矩形元件要做垂直放置,形成向下三角形。

Axure rp怎么实现页面部分区域悬浮效果?_第2张图片

3、设计后的效果如下:

Axure rp怎么实现页面部分区域悬浮效果?_第3张图片

4、用鼠标拖一个热区元件放在向上箭头的上面,给它添加鼠标单击时触发事件

Axure rp怎么实现页面部分区域悬浮效果?_第4张图片

5、在用例编辑窗口中,选 滚动到元件锚链接,右侧元件中选top,并勾选“仅垂直滚动”,点确定。

Axure rp怎么实现页面部分区域悬浮效果?_第5张图片

6、同样的,拖一个热区元件放在向下箭头的上面,并进行事件设置

Axure rp怎么实现页面部分区域悬浮效果?_第6张图片

7、同时选中向上箭头和向下箭头,右键,选择转换为动态面板,并对动态面板进行属性设置。

Axure rp怎么实现页面部分区域悬浮效果?_第7张图片

Axure rp怎么实现页面部分区域悬浮效果?_第8张图片

8、选择动态面板,右键|固定到浏览器,并进行如下属性。

Axure rp怎么实现页面部分区域悬浮效果?_第9张图片

9、按F5进行设计效果预览。按向上箭头可以滚动到页首,按向下箭头滚动到页尾

Axure rp怎么实现页面部分区域悬浮效果?_第10张图片

以上就是Axure rp实现页面部分区域悬浮效果的教程,希望大家喜欢,请继续关注脚本之家。

相关推荐:

Axure RP8怎么快速导入图片?

Axure rp怎么实现在新窗口打开链接?

Axure RP8中文本框怎么添加提示信息?

你可能感兴趣的:(Axure rp怎么实现页面部分区域悬浮效果?)