• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >axure > Axure教程|如何制作”返回顶部”原型功能?

Axure教程|如何制作”返回顶部”原型功能?

作者: 纪梦旭(微信号:sailalone001) 字体:[增加 减小] 来源:互联网 时间:2017-06-14

本文主要包含axure app原型教程,axure原型设计教程,axure原型图教程,axure制作app原型教程,原型工具axure教程等相关知识, 纪梦旭(微信号:sailalone001) 希望在学习及工作中可以帮助到您

1

以人人都是产品经理的首页为例,进行“返回顶部”原型制作介绍:

1、在工作区拖入一个动态面板命名为top,根据通常返回顶部的按钮在屏幕右下角的惯例设置top的X坐标和Y坐标,并在状态1(stage1)里插入一张返回顶部的图片,然后将动态面板top设置“固定到浏览器”,最后设置为”隐藏”备用。

2、再拖入一个动态面板命名为top_2,Y坐标与动态面板top一致,X坐标任意,但是不要与top重叠(我是直接将top_2放在了top的平行左边的位置),且top_2中不放入任何元件,然后将动态面板top_2设置“固定到浏览器”后备用。

1

3、拖入一个热区命名top_rq,X坐标与动态面板top_2的X坐标一致,Y坐标等于动态面板top_2的Y坐标加上动态面板top_2的高度(热区top_rq的Y坐标的设置不固定,看你的动态面板top想在页面滑动到什么位置开始显示自定义设置),宽度与动态面板top_2的宽度一致,高度直接拖到页面最底部。

2

4、设置页面交互(向下滑动显示)

添加“页面滚动时”事件,并添加两个条件和相应的事件如下:

(1)添加条件:元件范围 top_rp 接触 元件范围 top_2。

事件是:显示top 逐渐 500ms。

(2)添加条件:元件范围 top_rp 未接触 元件范围 top_2。

事件是:隐藏top 逐渐 500ms。

(下面是(1)设置的逐步截图,(2)的设置类似)

3

4

5

6

7

5、设置控件交互(返回顶部)拖入一个矩形命名top_mark,位置放在动态面板top的初始位置(即覆盖住top)。然后对动态面板top设置”鼠标点击时”事件。在弹出的窗口中,逐步进行:

  1. 在“添加动作”里选择“滚动到元件<锚链接>”;
  2. “配置动作”选择“top_mark”;
  3. 仅垂直滚动;
  4. 动画“缓慢进入”,时间300毫秒。

9

6、这样一个”返回顶部“的效果就做好了。点击F5预览,然后向下滑动下鼠标,在屏幕右下角就会显示返回顶部的按钮了,当返回顶部后,这个按钮又会消失不见。

您可能想查找下面的文章:

  • Axure教程:微信聊天列表原型制作(二)
  • Axure教程:微信聊天列表原型制作(一)
  • Axure教程|原型设计之抽屉列表
  • Axure教程:原型设计之多用户注册登录
  • Axure教程:如何制作一个不区分大小写的验证码原型?
  • Axure教程:原型设计之转盘抽奖
  • Axure教程:原型设计之水泡导航栏
  • Axure教程:原型设计之播放控制条
  • Axure教程:微信面对面建群原型设计
  • Axure教程:原型设计之弹幕

相关文章

  • 2017-06-13Axure 8.0 实例 | 模拟一个上传图片的原型
  • 2017-06-14轮播banner简便axure实现方式
  • 2017-06-13Axure教程:限制输入框输入字数
  • 2017-06-13自定义微信元件库:Axure基本元件的应用(下)
  • 2017-06-14Axure 原型 | 关于中继器的简单使用及应用的场景
  • 2017-06-13Axure教程:微信面对面建群原型设计
  • 2017-06-14高手在民间 | 手把手教你用Axure制作连连看游戏(附游戏地址)
  • 2017-06-14Axure7.0教程(八)函数介绍
  • 2017-06-13Axure教程:多账户的登录验证
  • 2017-06-14Axure 8.0 拖动滑块设置数字和日期

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • Axure操刀微信H5页面之《加密情书》的交互设计
    • Axure教程:限制输入框输入字数
    • Axure实例:顶栏和侧边栏的固定和窗口自适应
    • Axure教程:中继器如何切换标记状态?
    • Axure 制作下拉框省市县三级联动
    • Axure教程:如何画出曲线图?
    • Axure教程:移动端原型如何适配不同分辨率的手机?
    • 用Axure 实现“打飞机”,骚年,来一发(上)
    • 轮播banner简便axure实现方式
    • Axure实现多级联动下拉框

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有