返回首页

利用axure动态面板制作返回顶部按钮实例教程

时间:2015-11-06 20:46来源:betway必威官网www.etsupport.net 编辑:麦田守望者

在很多网站上都有一个“返回顶部“的按钮。不管屏幕怎么滚动,返回顶部按钮一直悬浮在固定位置,随时待命。一旦你点击它,他就像小火箭一样,嗖的一下,页面就回到页面顶部了!那么这个效果用Axure怎么实现呢?以下是来自小楼老师的一篇教程,赶紧来学一下吧!

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

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

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

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

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

利用axure动态面板制作返回顶部按钮实例教程
 

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

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

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

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

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

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

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

151

(图151)

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

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

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

152

(图152)

顶一下
(2)
50%
踩一下
(2)
50%
标签(Tag):Axure
------分隔线----------------------------
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码:点击我更换图片