《Axure9 Web端图片点击全屏化及鼠标悬停扩大》是一篇关于Axure的学习教程,通过简单几步就能实现教程中的效果图效果,当然只学习这一点,并不能完全掌握Axure技巧;你可以通过此加强元件,动态面板,内联框架等多维度案例或实操来进行更多的学习;此教程是由wenyang在2021-11-23发布的,目前为止更获得了 0 个赞;如果你觉得这个能帮助到你,能提升你Axure技巧;请给他一个赞吧。
当前,Web端主页添加大量图片很普遍,怎样利用Axure来制作Web端图片点击全屏和鼠标悬停放大的效果?一起来跟北极熊素材库的小编来看一看吧。
目前越来越多的web端主页会在简介中加入大量的图片,这些图片有些可以全屏查看,有些鼠标移入可使其扩大,给人一种可浮动的感觉。下面我们使用Axure 9.0制作一下上述效果。
点击图片全屏效果——预览:
鼠标悬停扩大图片——预览:
1. 添加内联框架
Axure新建页面,在基本元件中选择【内联框架】,拖拽进页面,点击【样式】,勾选隐藏边框。
2. 添加图片元件和底部控件
按照下图步骤即可,底部控件不是重点,我会把他放在Axhub上供大家下载;图片大小可根据页面大小自行定义长款比例。
导入图片:鼠标邮件点击,导入本地图片,我在这里是导入了6张图片。
在样式中,设置图片之间间距,以及将布局改为水平,网格排布,每行项数量3。
4. 制作点击之后的大图
如下图步骤:
这个时候不用关注大图尺寸,后续我们会通过交互将大图尺寸改变的。
5. 添加交互
中继器小图片添加交互:我为大图设置的是全屏化,按照网页大小设置的,在制作过程中也可以自由调整。
大图添加交互:该交互添加在动态面板上。
1. 添加图片
选择图片元件,添加到页面中,调整图片大小,导入本地图片。
2. 转换为动态面板
将图片元件转换为动态面板,在动态面板样式中取消勾选自适应内容
3. 设置交互
进入动态面板中,为图片设置交互动作。
4. 复制
复制上述已设置好的图片动态面板,自行布局即可。
四、补充知识
赠人玫瑰,手有余香
< 上一篇 Axure制作APP折叠面板 axure手风琴制作教程操作实例
> 下一篇 Axure登陆验证界面教程
2022-06-17 09:16
2022-06-16 10:08
首席设计师
高级视觉设计师
高级插画设计师
输入的验证码不正确
评论区
暂无评论