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

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

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

Axure RP 9 V9.0.0.3611 汉化安装版(附汉化包)

• 类型：辅助设计
• 大小：219MB
• 语言：简体中文
• 时间：2018-10-29

查看详情

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

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

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

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

2、实现在显示区域展示图234，隐藏图1效果（右侧按钮图标用例）。选中右侧按钮，“鼠标点击时”-添加用例；在d出窗口点击“元件”下的“移动”，在最右侧“配置动作”进行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怎么设置点击事件改变图片?