案例17:回到顶部交互效果

  • 2022-04-15 15:34:01
  • 阅读次数:
  • 作者:盈岚科技小编
  • 来源:http://www.lyjtt.cn

第一步:昆明网站制作小编将准备好的feedback_normal.jpg、mobile_normal.jpg和back2top_normal.jpg 三张图像素材拖放到Axure设计区域,见图39,并分别给三张图像添加鼠标悬停时的交互样式,见图40。

11.jpg

(图39)

11.jpg

(图40)

第二步:同时选中这三个图像部件,单击右键,在弹出的关联菜单中选择【转换为动态面板】并给其命名为scroll2top,右键单击该动态面板,在弹出的关联菜单中选择【固定到浏览器】,在弹出的【固定到浏览器】对话框中勾选【固定到浏览器窗口】,水平固定【右】,边距【20】,垂直固定【底部】,边距【20】,如图41所示。单击【确定】按钮关闭【固定到浏览器】对话框。

此时,昆明网站建设小编认为scroll2top已经被固定在浏览器右下角了,但是由于设计区域中还没有内容,所以浏览器无法滚动,在【部件】面板中拖放一个矩形部件到设计区域,并将其坐标设置为(x:0,y:2000)。

第三步:在【部件】面板中拖放一个热区部件到设计区域,给其命名为stone_top,并设置其坐标(x:0,y:0),见图42。

11.jpg

(图41)

11.jpg


(图42)

第四步:在【Outline:页面】面板中双击scroll2top动态面板下的【回到顶部】图像,见图43,然后在部件【属性】面板中双击【鼠标单击时】事件,在弹出的【用例编辑器】中新增【滚动到部件<锚链接>】动作,在右侧的配置动作中勾选stone_top热区,在底部选择【仅垂直滚动】,动画【摇摆】,时间【300】毫秒,见图44。单击【确定】按钮关闭【用例编辑器】。

第五步:在顶部的工具栏中单击【预览】按钮,或者按下快捷键F5/Shift+Command+P,快速预览交互效果。

11.jpg

(图43)

11.jpg

(图44)


当前文章标题:案例17:回到顶部交互效果

当前URL:http://www.lyjtt.cn/news/wzzz/3419.html

上一篇:案例16:APP可滚动内容的三种常用实现方法

下一篇:案例18:手风琴菜单交互之第一步

网站建设、抖音推广、头条推广、微信朋友圈推广、快手推广专线:15368242187(微信同号)