axure 图片切换图片的交互_AxureRP8中实现伸缩式的图片展示交互效果

上午的时候，在一个群里看到这样的实现需求。

伸伸缩缩，感觉很爽的样子。

那么，这样的一个交互效果如何实现呢？

详细的教程我就不写了，直接上交互截图和源文件就好了。

好多操作步骤是吧？

实际上，只需要在一张图片上完成这些设置，剩下不管有多少张图片都是复制粘贴而已。

这里主要说一下这些交互内容中的关键点。

首先，需要两个变量记录当前展示的图片编号，和上一个展示的图片编号，通过这两个编号值的大小决定当前展示的图片是否移动。

例如，鼠标指针从右侧滑向左侧的时候，实际上只需要前一个图片向右移动，当前展示的不需要移动位置。

所以，鼠标指针移入时，做了选中当前图片的操作，并且在【选中时】，进行了判断，如果当前图片编号(图片名称用数字编号命名，所以通过“This.name”能够获取)大于上一张图片编号(即当前图片在上一张图片右侧)，此时向左移动当前图片。

同样道理，前一张展示的图片取消选中时(通过选项组名称完成取消)，如果图片编号大于当前展示图片的编号(在展示图片右侧的图片)，则向右移动前一张展示的图片。

但是，通过以上的交互处理，前一张展示图片和当前展示图片之外的图片还不能联动。

所以，添加了尺寸改变时的交互。

尺寸改变时的交互实际上并没有相关的操作触发，而是在每张图片鼠标移入时，通过【触发事件】的动作，让每个元件执行【尺寸改变时】的交互。

在这个交互中，每张图片都判断自己所处的位置。

位置在前一张展示图片右侧并且在当前展示图片左侧的图片全部向左移动。

例如上一张展示图片是2号，当前展示图片是6号，此时3、4、5号图片都应该左移。

位置在前一张展示图片左侧并且在当前展示图片右侧的图片全部向右移动。

例如上一张展示图片是5号，当前展示图片是1号，此时2、3、4号图片都应该右移。

以上就是这个交互效果实现的整体思路。

~~~~~~~~~~~~ 正文结束下面没了 ~~~~~~~~~~~~

小楼老师全新打造Axure RP 9精品课程，以独有的教学方法与技巧，帮助你以最短的时间高效的完成学习目标。

《Axure RP 9 萌新修炼视频》-----从零入门进阶的优质课程------【点此查看详情】

喜欢 (49)or分享 (0)

axure 图片切换图片的交互_AxureRP8中实现伸缩式的图片展示交互效果相关推荐

在html中三个图片切换,轻松搞定网页中的图片切换
生活中经常看到,像新浪等很多门户网站的首页都有滚动图片的展示,如下图所示: 某网站首页滚动切换图片这样不但可以减少文字的单一.乏味,而且可以直观内容,更好的吸引用户.那在我们做软件系统时,是否也可以 ...
图片不能置于底层怎么办_PPT中常遇到的图片问题和解决方案
做PPT,自然少不了图片素材.而且,大多数情况下,往往是客户或领导提供的图片素材,要求把这些图片放上去,更倒霉的情况是这些图片质量还不高! 大的大.小的小.还不清晰,今天就给大家全面介绍几种方法,学好 ...
html5中背景图片的大小怎么调,css中怎么改变背景图片大小？
在CSS中,想要改变背景图片的大小,可以通过设置background-size属性来实现.下面本篇文章就来给大家介绍一下使用background-size属性改变背景图片大小的方法,希望对大家有所帮助 ...
android项目添加图片,安卓开发：往项目中添加并使用图片
一往项目中添加图片文件 (1)iOS项目在iOS项目中,如果往项目中添加的图片是png格式的,就是往Assets.xcassets文件夹中添加. 如果不是png格式,比如jpg格式的图片,就不能往 ...
HTML为什么图片会自动在中间,html中怎么让一个图片（img）在大于父容器（div）的情况下仍中间部份居中...
html中怎么让一个图片(img)在大于父容器(div)的情况下仍中间部份居中以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下 ...
怎样把图片存上mysql数据库表中_怎样把图片存入SQL数据库表中？
展开全部一.先来熟悉一下将要使用的对象方法: 用来获取上一个页面传递过来的数据一62616964757a686964616fe58685e5aeb931333431363030般是使用Reques ...
c4d怎么导入图片描图建模_在CAD中如何直接利用图片进行描图？
回答: 方法: 第一步:运行Excel,在表格中输入数据. 第二步:操作之前,首先复制B列的数据.再运行CAD,输入"pl",按下回车键.然后在命令行直接按下"Ctrl+ ...
lua和unity如何交互_Unity中C#对象与Lua之间交互的原理
lua与其他语言交互,都是通过操作虚拟栈交流的.而操作虚拟栈最原始的方法就是通过lua与c语言的api,由于直接操作lua与c比较繁琐而且容易出错.因此tolua作为中间层而存在. 那么unity要把 ...
linux和安卓交互,Android中webview和js之间的交互及注意事项
1.Android中利用webview调用网页上的js代码. Android 中可以通过webview来实现和js的交互,在程序中调用js代码,只需要将webview控件的支持js的属性设置为true ...

axure 图片切换图片的交互_AxureRP8中实现伸缩式的图片展示交互效果

axure 图片切换图片的交互_AxureRP8中实现伸缩式的图片展示交互效果相关推荐

最新文章

热门文章