起點課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個人IP打造特權(quán)
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導(dǎo)直播
12場專業(yè)技能直播
會員專屬社群
榮耀標(biāo)識AXURE教程：簡單制作拖拽照片交互墻效果
編輯導(dǎo)語：如何用AXURE制作拖拽照片交互墻效果呢？本文作者通過實際操做，為我們總結(jié)和分享了他的做法。
通過該教程可以簡單實現(xiàn)照片墻拖拽交互效果，照片可以使用鼠標(biāo)進(jìn)行拖拽，支持圖片大圖預(yù)覽。適合Axure新手朋友。
一、效果預(yù)覽
二、準(zhǔn)備元件
- 中繼器：存放向圖片素材
- 圖片元件：加載圖片
- 動態(tài)面板：拖拽效果使用
三、實現(xiàn)步驟
1. 步驟一
添加一個中繼器，設(shè)置中繼器數(shù)量項的字段名稱。一列一張圖片導(dǎo)入，字段名稱不能重復(fù)了，如圖：
中繼器圖片導(dǎo)入完成后，開始給圖片賦值。選中圖片元件，添加動作“設(shè)置圖片”，Default默認(rèn)為值。
點擊fx進(jìn)入函數(shù)選擇。這邊必須要選擇對應(yīng)中繼器的字段名稱，確定保存元件交互即可（像這樣多復(fù)制幾個圖片修改對應(yīng)的中繼器字段即可）。
把設(shè)置好交互的圖片元件轉(zhuǎn)為動態(tài)面板，進(jìn)行面板拖拽交互設(shè)置，設(shè)置如下圖：
2. 步驟二
設(shè)置鼠標(biāo)點擊彈窗效果。同樣的，我們需要進(jìn)入需要設(shè)置交互的圖片元件中，添加鼠標(biāo)點擊事件進(jìn)行設(shè)置。顯示效果，這邊選擇了燈箱效果，就是背景虛化效果，但然你們也可以試試其他幾個試試。
繼續(xù)設(shè)置圖片彈窗放大圖片的值，跟上面圖片賦值方式差不多，只是選擇的圖片對象不一樣。
最后f5預(yù)覽看看，還是不明白的同學(xué)可以直接下載RP看看，地址：http://www.pmdaniu.com/rp/detail/123250
作者：符號，目前從事互聯(lián)網(wǎng)電子商務(wù)項目，崗位產(chǎn)品負(fù)責(zé)人一枚
本文由 @符號 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載
題圖來自Unsplash，基于CC0協(xié)議
- 目前還沒評論，等你發(fā)揮！
