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

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

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

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

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

好多操作步骤是吧?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

喜欢 (49)or分享 (0)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/504119.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

什么是编程语言,大神教你为什么要学C语言?

首先来说说编程语言这个概念。 编程,其实就是让计算机听懂自己的话,让计算机帮自己想干的事情。编程语言,就是让你能够和计算机进行交流的一种语言。说白了就是让你的软件按你的命令干活。 打比方说,我们经常在僵尸片里面看到&a…

xshell vim 不能粘贴_linux基础知识:vim(vi)的知识

### vim三种模式命令行模式:在该模式下不能对文本进行- 直接编辑,可以输入一些操作(删除行,复制行,移动光标,粘贴)【打开之后默认进入的模式】编辑模式:在该模式下可以对文件内容进行编辑末行模式&#xff…

新手如何学习C语言/C++,教你一年时间是拿到年薪50万

最近会有一些初中高中大学的同学问,C语言C不知道怎么学习不会写代码怎么办?大致上都是一些类似的问题吧,回想一下自己走过的路,反复的了很久思考然后写了这篇文章,希望可以对一些迷惘新手小白程序员同学一丝帮助&#…

html横线标记_html中横线怎么写代码

html代码中:如何输入一条长长的横线呀? 用input页面标签 并将下Border设为直线 input[type="text"]{border-bottom:solid 1px #ccc;} html代码中:如何输入一条长长的横线? 你可以用div标签去实现: 横线中间有字 【html5与html的区别】 html通常指的是用来写网页的…

pycharm导入模块不智能显示_Pycharm自动导入模块小技巧

原标题:Pycharm自动导入模块小技巧作者 | 刘志军来源 | Python之禅如果能把工具熟练运用,往往能达到事半功倍的效果,Pycharm 是很多Python开发者的首选IDE,提供各种快捷键、重构功能、调试技巧等,Python是动态语言&…

mac adb 找不到设备_win/Mac办公软件下载找不到资源?试试这三个强大的神器

大家好,我们在办公时,office、wps等办公软件是我们必须用到的,还有一些专业软件:CAD、PS、PROE、UG、SolidWorks、keyshot、VRay、3DsMax、Labview、Maya、AE、AI、ANSYS等也是各行各业的专业人员工作时必不可少的,但是…

C语言入门经验:零基础如何学习C语言?

工作中,接触过很多想到学习c语言而又没有一点计算机基础的人。经常有人问”我没有一点基础,该怎么入门c语言啊”。看过很多初学者久久摸不到门路,每到这个时候,脑海中总会浮现一个问题:学习c语言真的就那么难吗? 不难…

手机1像素线粗_关于移动端一像素线的解决方案

为什么会有一像素线这个问题因为移动端布局我们大家都知道根据不同的手机会有不同的dpr 例如 爱疯6plus就是3 爱疯6就是2 当我们定义1px的时候就会在不同手机里面显示不同的粗细长度,dpr为3的时候就是3px,dpr为2的时候就是2px,具体dpr是什么…

20天掌握C语言,C语言零基础到项目实战,玩转C语言

一般来说,和其他编程语言相比,C/C语言学起来会比较累,如果想达到项目开发的状态,更是需要花费很长时间的努力。那么,如何才能更好地把所学知识用到实际工作中去呢?今天小编就带大家来看看学习C/C语言到什么…

32岁了学python来的及吗_现在27岁学python来得及吗?

答案是肯定的,27岁学习Python语言是来得及的。 学习Python语言是当前一个比较好的选择,原因有以下几点: 第一,Python语言有健全的生态。Python语言虽然在最近几年被广泛关注,但是Python语言并不是一个新出现的语言&…

怎样快速画出一个正方体_小学数学非常有效的“画图”解题法,快速解题的“金钥匙”...

小学阶段的数学主要培养的是孩子的逻辑思维能力,是从形象思维逐步过度到抽象思维的过程,如果在小学阶段没有将基础打牢,那么等孩子上初中后面对更复杂的学习内容,就会变得更吃力。在小学数学中,“画图”是帮助孩子建立…

零基础入门C语言,只需2小时轻松学会!

学好C语言的秘诀就是1234:“一字真言,两种态度,三个框架,四项注意”。 如有小伙伴想自学,可以进群731871503进行交流 学习,提升编程,共同进步 一、一字真言 各位看官,学好C语言&a…

python调用百度地图画轨迹图_[宜配屋]听图阁

如题,先上效果图:主要分为两大步骤 使用python语句,通过百度地图API,对已知的地名抓取经纬度 使用百度地图API官网的html例程,修改数据部分,实现呈现效果 一、使用python语句,通过百度地图API&a…

select 移动端 第一个无法选中_总结在移动端碰到的坑

一、安卓设备的select options的坑,尽量使用各浏览器内核都支持的api在添加 OPTION 元素时如果需要向指定索引前插入 OPTION,可以使用 options.add(option, index);如果需要向 SELECT 尾部添加 OPTION,可以使用 options.add(optio…

零基础初学c语言常见的10个错误

时光匆匆,新的学年又即将要来临。很多有意愿报我们学院的准学弟学妹们,都开始提前学习c语言这门功课。 如有小伙伴想自学,可以进群731871503进行交流学习,提升编程,共同进步 但是很多学弟学妹们之前都没有学习过太多相…

centos7安装yum_centos7下yum方式安装jenkins

一、首先安装java组件1、可以直接yum安装yum install -y java2、或者下载jdk的包,设置环境变量也是可以的https://download.oracle.com/otn/java/jdk/11.0.510/e51269e04165492b90fa15af5b4eb1a5/jdk-11.0.5_linux-x64_bin.tar.gz?AuthParam1578369202_107ade17483…

感知器及其在python中的实现_(二)感知器算法及其python实现

出发点一旦判别函数的形式确定下来,不管它是线性的还是非线性的,剩下的问题就是如何确定它的系数。在模式识别中,系数确定的一个主要方法就是通过对已知样本的训练和学习来得到。感知器算法就是通过训练样本模式的迭代和学习,产生…

原来C语言和其他高级语言的最大的区别是这个...

我们知道C语言和其他高级语言,最大的区别就是C语言是要操作内存。 如有小伙伴想自学,可以进群731871503进行交流 学习,提升编程,共同进步 我们需要知道——变量,其实是内存地址的一个抽像名字罢了。在静态编译的程序中&#xff…

python爬虫登录网站_python爬虫19 | 遇到需要的登录的网站怎么办?用这3招轻松搞定!...

你好 由于你是游客 无法查看本文 请你登录再进 谢谢合作当你在爬某些网站的时候 需要你登录才可以获取数据 咋整? 莫慌 小帅b把这几招传授给你 让你以后从容应对那么 接下来就是登录的常见方法无非是这两种 1、让你输入帐号和密码登录2、让你输入帐号密码验证码登录…

ei会议论文录用但不参加会议_美国研究生和博士申请论文发表真的很重要吗?...

在美国研究生和博士申请的过程中,论文可以直观体现申请者研究经历,一篇高质量的论文能够让美国招生官能够快速了解到申请者对所申请专业的理解,同时能够通过文章论述直观感受到申请者的学术思维力、判断力、逻辑分析能力等,这是简…