axure怎么实现多张图片同区域左右滑动显示效果?

百度经验   发布时间:2019-05-10 14:47:25   作者:i夏茉   我要评论

axure怎么实现多张图片同区域左右滑动显示效果?手机app中经常能看到多张图片是滑动显示的,该怎么制作这个原型?下面我们就来看看详细的教程,需要的朋友可以参考下

现在很多app,无论是宽屏还是窄屏,为了在同一个页面展示多点内容,类似于图片类的内容,都可以通过在区域内左右滑动显示更多,既好看又可以减少跳转,这个效果我们可以使用axure来制作,下面我们就来看看详细的教程。

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

1、如图所示,以四个图为例。首先大家准备四个宽一样的图片(当然不一样也可以,就是移动的尺寸需要根据需要计算);

为了确定位置及效果,我在123图的下面加了一个底,宽为600,在两侧预留20px的位置,各放置两个15*15的图标,做激发操作的按钮。

以四个图为例,实例中的每个图宽180px,为四个图命名1234,并将图123之间的间距调整为10,123为显示,4为隐藏(属性),图4放置在底图最右边的边缘位置;

注:为了很明确的位置,大家可如图中一样,通过工作窗口的边缘拖出辅助线做帮助。

2、实现在显示区域展示图234,隐藏图1效果(右侧按钮图标用例)。选中右侧按钮,“鼠标点击时”-添加用例;在弹出窗口点击“元件”下的“移动”,在最右侧“配置动作”进行1234的配置,具体内容如下:

图1的处理:

选中1,下方“移动”选“经过X设置值为-200(值的算法:图1距离底图的左侧边缘为20,+图片本身的宽度,由于是往左移动,所以是负数);为了防止图片一致移动,为每个图片设置边界值,图1设置边界值,左侧>120;保证点击切换按钮的时候,图标不冲出底图的显示区域

图2:的处理:

选中2,下方“移动”选“经过X设置值为-190(间距10+180,也就是说图2移动到图1的位置);左侧>120;

图3的处理:

选中3,下方“移动”选“经过X设置值为-190(间距10+180,也就是说图3移动到图2的位置);左侧>310;

图4的处理:

选中4,下方“移动”选“经过”X设置值为-200(图片本身的宽度+图标占据的位置,也就是说图4移动到图3显示);左侧>500;

隐藏显示的设置:同用例(case1)下,元件-显示/隐藏,图1设置为隐藏,图4设置为显示;

确定。

3、左侧按钮图标加用例。

将步骤2中的移动中的“-”去掉,图1设置为显示,图4设置为隐藏。其他不用动。提交即可。边界值按照1234,依次为:120,310,500,700

4、多个图片的设置方法类似,依次类推。

以上就是axure多张图片同区域左右滑动显示效果的制作方法,希望大家喜欢,请继续关注澳门金沙网上娱乐。

相关推荐:

Axure图片交互样式有哪些?

Axure RP8怎么快速导入图片?

Axure RP 8怎么设置点击事件改变图片?

相关文章

  • Axure RP怎么制作弹出菜单的效果?

    Axure RP怎么制作弹出菜单的效果?Axure中制作网页原型很简单,想要制作一个弹出式的菜单,该怎么弄制作这个效果呢?下面我们就来看看详细的教程,需要的朋友可以参考下
    2018-06-26
  • axure元件库怎么卸载 axure卸载元件库教程

    axure元件库怎么卸载?axur元件库可以自己建立或者删除,该怎么卸载元件库呢?下面我们就来看看axure卸载元件库教程,需要的朋友可以参考下
    2018-06-20
  • Axure图片交互样式有哪些?

    Axure图片交互样式有哪些?Axure中图片交互样式种类挺多的,今天我们就来一一介绍关于图片交互样式的简单知识,需要的朋友可以参考下
    2018-06-19
  • Axure菜单导航怎么添加鼠标选中变色的特效?

    Axure菜单导航怎么添加选中变色的特效?Axure中制作的导航菜单,想要添加一些特效,比如鼠标经过选中时背景颜色发生变化,下面我们就来看看详细的教程,需要的朋友可以参考
    2018-06-15
  • Axure RP 8.1企业版汉化破解安装授权图文详细教程(附注册授权码)

    Axure RP 8.1是一款功能非常强大的专业原型设计工具,那么,Axure RP 8.1怎么安装?以及Axure RP 8.1如何汉化破解呢?对此,本文就为大家带来了Axure RP 8.1企业版汉化破解
    2018-06-12
  • Axure怎么制作钟表秒针旋转的效果?

    Axure怎么制作钟表秒针旋转的效果?Axure中想要制作一个指针秒表转动的效果,该怎么制作呢?下面我们就来看看详细的教程,需要的朋友可以参考下
    2018-06-11
  • Axure怎么绘制流程图?

    Axure怎么绘制流程图?Axure中想要画一个流程图,该怎么画流程图呢?下面我们就来看看Axure画流程图的教程,需要的朋友可以参考下
    2018-05-30
  • Axure焦点元件怎么制作?

    Axure焦点元件怎么制作?Axure中的元件想要添加焦点,该怎么将焦点聚集到元件中呢?下面我们就来看看详细的教程,需要的朋友可以参考下
    2018-05-30
  • Axure流程图怎么添加连接线?

    Axure流程图怎么添加连接线?Axure中绘制的流程图需要添加连接线,该怎么添加呢?下面我们就来看看详细的教程,需要的朋友可以参考下
    2018-05-24
  • Axure元件怎么创建跳转链接?

    Axure元件怎么创建跳转链接?Axure元件需要添加跳转链接,该怎么添加这个功能呢?下面我们就来看看详细的教程,需要的朋友可以参考下
    2018-05-24

最新评论