专门做名片的网站,义乌加工厂外发加工,北京手机网站建设费用,青州网站建设上午的时候#xff0c;在一个群里看到这样的实现需求。伸伸缩缩#xff0c;感觉很爽的样子。那么#xff0c;这样的一个交互效果如何实现呢#xff1f;详细的教程我就不写了#xff0c;直接上交互截图和源文件就好了。好多操作步骤是吧#xff1f;实际上#xff0c;只需…上午的时候在一个群里看到这样的实现需求。伸伸缩缩感觉很爽的样子。那么这样的一个交互效果如何实现呢详细的教程我就不写了直接上交互截图和源文件就好了。好多操作步骤是吧实际上只需要在一张图片上完成这些设置剩下不管有多少张图片都是复制粘贴而已。这里主要说一下这些交互内容中的关键点。首先需要两个变量记录当前展示的图片编号和上一个展示的图片编号通过这两个编号值的大小决定当前展示的图片是否移动。例如鼠标指针从右侧滑向左侧的时候实际上只需要前一个图片向右移动当前展示的不需要移动位置。所以鼠标指针移入时做了选中当前图片的操作并且在【选中时】进行了判断如果当前图片编号(图片名称用数字编号命名所以通过“This.name”能够获取)大于上一张图片编号(即当前图片在上一张图片右侧)此时向左移动当前图片。同样道理前一张展示的图片取消选中时(通过选项组名称完成取消)如果图片编号大于当前展示图片的编号(在展示图片右侧的图片)则向右移动前一张展示的图片。但是通过以上的交互处理前一张展示图片和当前展示图片之外的图片还不能联动。所以添加了尺寸改变时的交互。尺寸改变时的交互实际上并没有相关的操作触发而是在每张图片鼠标移入时通过【触发事件】的动作让每个元件执行【尺寸改变时】的交互。在这个交互中每张图片都判断自己所处的位置。位置在前一张展示图片右侧并且在当前展示图片左侧的图片全部向左移动。例如上一张展示图片是2号当前展示图片是6号此时3、4、5号图片都应该左移。位置在前一张展示图片左侧并且在当前展示图片右侧的图片全部向右移动。例如上一张展示图片是5号当前展示图片是1号此时2、3、4号图片都应该右移。以上就是这个交互效果实现的整体思路。~~~~~~~~~~~~ 正文结束 下面没了 ~~~~~~~~~~~~小楼老师全新打造Axure RP 9精品课程以独有的教学方法与技巧帮助你以最短的时间高效的完成学习目标。《Axure RP 9 萌新修炼视频》-----从零入门进阶的优质课程------【点此查看详情】喜欢 (49)or分享 (0)
