1. 程式人生 > >Axure學習筆記整理5-燈箱效果

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-顯示-燈箱效果-背景色設定為半透明黑色。

直接去預覽效果即可。