編輯導(dǎo)語(yǔ)：如何用AXURE制作拖拽照片交互墻效果呢？本文作者通過(guò)實(shí)際操做，為我們總結(jié)和分享了他的做法。

通過(guò)該教程可以簡(jiǎn)單實(shí)現(xiàn)照片墻拖拽交互效果，照片可以使用鼠標(biāo)進(jìn)行拖拽，支持圖片大圖預(yù)覽。適合Axure新手朋友。

一、效果預(yù)覽

二、準(zhǔn)備元件

1. 中繼器：存放向圖片素材
2. 圖片元件：加載圖片
3. 動(dòng)態(tài)面板：拖拽效果使用

三、實(shí)現(xiàn)步驟

1. 步驟一

添加一個(gè)中繼器，設(shè)置中繼器數(shù)量項(xiàng)的字段名稱。一列一張圖片導(dǎo)入，字段名稱不能重復(fù)了，如圖：

中繼器圖片導(dǎo)入完成后，開(kāi)始給圖片賦值。選中圖片元件，添加動(dòng)作“設(shè)置圖片”，Default默認(rèn)為值。

點(diǎn)擊fx進(jìn)入函數(shù)選擇。這邊必須要選擇對(duì)應(yīng)中繼器的字段名稱，確定保存元件交互即可（像這樣多復(fù)制幾個(gè)圖片修改對(duì)應(yīng)的中繼器字段即可）。

把設(shè)置好交互的圖片元件轉(zhuǎn)為動(dòng)態(tài)面板，進(jìn)行面板拖拽交互設(shè)置，設(shè)置如下圖：

2. 步驟二

設(shè)置鼠標(biāo)點(diǎn)擊彈窗效果。同樣的，我們需要進(jìn)入需要設(shè)置交互的圖片元件中，添加鼠標(biāo)點(diǎn)擊事件進(jìn)行設(shè)置。顯示效果，這邊選擇了燈箱效果，就是背景虛化效果，但然你們也可以試試其他幾個(gè)試試。

繼續(xù)設(shè)置圖片彈窗放大圖片的值，跟上面圖片賦值方式差不多，只是選擇的圖片對(duì)象不一樣。

最后f5預(yù)覽看看，還是不明白的同學(xué)可以直接下載RP看看，地址：http://www.pmdaniu.com/rp/detail/123250

作者：符號(hào)，目前從事互聯(lián)網(wǎng)電子商務(wù)項(xiàng)目，崗位產(chǎn)品負(fù)責(zé)人一枚

本文由 @符號(hào) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議