中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

本文主要講述了如何利用Axure制作出手風琴效果的圖片展示效果，一起來看看~

效果體驗鏈接：https://5oqd60.axshare.com

操作分析

1. 鼠標移入圖片時，隱藏遮罩，鼠標移出圖片時，顯示遮罩。
2. 單擊某圖片，其余圖片逐漸隱藏，被點擊的圖片視圖首先移至最左側，然后尺寸變大，從左至右逐漸覆蓋整個頁面，這個時候圖片全景顯示。
3. 圖片展開后點擊關閉按鈕，圖片視圖以左側為錨點收縮至展開前的尺寸，然后整體移至點擊前的位置。

關鍵要素

動態面板的使用。

實現步驟

準備階段

1. 首先準備5張同樣尺寸的圖片，我這里的圖片尺寸為1680*1050。
2. 打開Axure，往工作區拖入一個1920*1080的矩形（矩形大小隨意，只要比圖片大就ok了~），設置填充顏色為灰黑，拖至x=0，y=0的位置。
3. 拖入一個318*1050的動態面板（寬高可自己設置），然后按住鍵盤ctrl+shift，用鼠標左鍵拖動復制4個同樣的動態面板，擺放在合適的位置，這里分別給他們命名為01~05。
4. 將五張圖片分別放入01~05的動態面板中，需要注意的是，01動態面板中的圖的位置為x=0，y=0；02動態面板中的圖的位置為x=-338，y=0；03動態面板中的圖的位置為x=-678，y=0；04動態面板中的圖的位置為x=-1021,y=0；05動態面板中的圖的位置為x=-1362，y=0，關閉icon，分別拖入一個關閉icon放置在每個動態面板state中的固定位置，這里是x=1614,y=18。
5. 拖入一個318*1050的矩形，填充灰黑色，取消邊框，透明度設置為50%，然后按住鍵盤ctrl+shift,用鼠標左鍵拖動復制4個同樣的矩形，分別覆蓋在動態面板上,作為遮罩。

全部準備完成后如下圖所示：

設置交互

（1）首先設置鼠標移入隱藏遮罩，鼠標移出顯示遮罩的交互。

選中遮罩，分別設置如下所示的交互：

（2）然后對01~05動態面板設置如下交互

01動態面板的交互：

02動態面板的交互：

03動態面板的交互：

04動態面板的交互：

05動態面板的交互：

（3）然后是展開圖片中的關閉按鈕的交互

01動態面板中的關閉按鈕的交互：

02動態面板中的關閉按鈕的交互：

03動態面板中的關閉按鈕的交互：

04動態面板中的關閉按鈕的交互：

05動態面板中的關閉按鈕的交互：

交互設置完成，點擊預覽即可實現手風琴圖片展示效果啦~~~

本文由 @?lily_wan 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議