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

導讀：圖片列表是常用的展示方式，所以今天作者就和大家分享，在Axure里如何用中繼器制作一個能夠查看大圖的圖片列表。

一、制作完成后應具備以下效果

鼠標移入圖片時，圖片有有一個放大縮小的效果

鼠標單擊圖片時，顯示對應圖片的大圖，點擊空白地方隱藏大圖

制作完成后，再次使用時，僅需要在中繼器表格內導入圖片，自動生成交互效果

二、制作材料準備

制作的原型的元件包括：中繼器、圖片元件，動態面板。

1. 中繼器內部元件

我們首先添加一個中繼器原件，講中繼器內部自帶的矩形刪除，然后在中繼器放置一個圖片元件，案例中圖片寬為200，高為200，這里根據你需要展示的圖片比例設置即可。完成后鼠標右鍵將圖片轉為動態面板，后續需要通過動態面板做移入放大縮小的效果，這里動態面板需要取消自適應內容。

中繼器表格表格第一列我們可以改名為picture，在下面表格里鼠標右鍵導入圖片，或者直接復制粘貼圖片進去即可。

2. 中繼器外部元件

外部只需要一個圖片的元件，這個圖片是大圖，圖片大小自己設定即可，寬和高的比例應該和中繼器里的圖片的比例一致，案例中是寬500，高500。然后我們需要將大圖轉為動態面板，然后固定在瀏覽器中部，默認隱藏。

三、交互制作

1. 中繼器每項加載時交互

中繼器每項加載時，我們要把存放在中繼器表格里面的圖片，設置到中繼器內的圖片元件。這里我們用設置圖片的交互，選擇值==item.picture，設置完成后的效果如下圖所示

2. 鼠標移入圖片時交互

鼠標移入圖片時，我們希望對應圖片有個動態的縮放效果。我們通過設置尺寸的交互，將圖片的尺寸先設置為原來的1.1倍，錨點在中部，設置尺寸的交互需要增加線性的動畫，動畫時間為500毫秒。再用等待的交互，等待動畫時間介紹，因為前面的動畫時間是500毫秒，所以這里也是等待500毫秒。最后我們再次用設置尺寸的交互，將圖片大小還原，因為前面是放大了1.1倍，所以這里也是縮小1.1倍，同樣地，我們也給他增加一個線性的動畫，動畫時間為500毫秒。

3. 鼠標單擊圖片時交互

鼠標點擊中繼器內的圖片時，我們用顯示的交互，將大圖的動態面板顯示，這里需要勾選燈箱效果，這樣點擊空白的地方大圖才會自動隱藏，燈箱的顏色為黑色，50%透明度。最后，我們還需要將鼠標單擊圖片的值傳到大圖里，這里圖片的值其實就是保留在中繼器表格里picture列的值，所以我們設置大圖的值==item.picture

這樣我們就完成了中繼器圖片列表放大圖片的原型模板了，下次使用時，我們只需要導入圖片即可自動生成交互，是不是很方便呢？感興趣的同學們可以動手試試哦。

那本期的教程就到此為止了，感謝您的閱讀，我們下期見，88~

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

題圖來自Unsplash，基于CC0協議