Axure学习笔记整理5-灯箱效果

灯箱效果:

拖拽4张小图片分别命名为1/2/3/4,如下图;

拖拽一个图片部件转换为动态面板命名为big-img,添加state1、state2、state3、state4并分别双击进去放好跟之前的1/2/3/4相同的图片;如下图:

对名称为1 图片做交互:’鼠标单击时‘-设置面板状态-勾选动态面板img-state1;同时添加交互’显示‘-勾选动态面板img-state1-显示-灯箱效果-背景色设置为半透明黑色。如果有需要可以将动态面板-固定到浏览器-居中。

复制图片1的交互用例到图片2、3、4并依次修改,例如将图片2的用例修改为:’鼠标单击时‘-设置面板状态-勾选动态面板img-state2;同时添加交互’显示‘-勾选动态面板img-state2-显示-灯箱效果-背景色设置为半透明黑色。

直接去预览效果即可。

猜你喜欢

转载自blog.csdn.net/weixin_41556724/article/details/85706130
今日推荐