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

灯箱效果:

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

Axure学习笔记整理5-灯箱效果_第1张图片

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

Axure学习笔记整理5-灯箱效果_第2张图片

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

Axure学习笔记整理5-灯箱效果_第3张图片

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

直接去预览效果即可。

 

你可能感兴趣的:(Axure)