Axure制作回到顶部的网页交互

2021年3月22日19:25:48 发表评论 388 views
  1. 打开Axure软件,新建一个母版,母版名称命名为“回到顶部”

    Axure制作回到顶部的网页交互

  2. 向母版画布区拖入热区和自定义回到顶部控件,分别命名为 顶部热区 和 回到顶部。热区控件x,y坐标设置为0,0
  3. 将自定义回到顶部控件设置为 动态面板,命名为 顶部面板
  4. 双击顶部面板进入自定义回到顶部控件操作区,新增 鼠标单击事件,在弹出用例编辑窗口,添加动作选择 链接/滚动到元件<锚链接>,配置动作选择 顶部热区控件且仅垂直滚动设置,动画可根据实际需要自行选择,确认提交。

    Axure制作回到顶部的网页交互

  5. 设置 自定义回到顶部控件可见性为 隐藏
  6. 选择 母版画布 交互事件为 窗口滚动时,在弹出用例编辑窗口选择 编辑条件,在条件设立窗口设置条件,窗口滚动距离大于500,显示回到顶部控件

    Axure制作回到顶部的网页交互

  7. 同样操作,设置窗口滚动距离小等于500,隐藏回到顶部控件

 

Axure制作回到顶部的网页交互

8. 鼠标右键 顶部面板 选择 固定到浏览器项,根据实际需求设置回到顶部控件位置

Axure制作回到顶部的网页交互

9.将回到顶部母版拖到需求网页页面,完成网页回到顶部交互效果

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: