上午的時候，在一個群里看到這樣的實現需求。

伸伸縮縮，感覺很爽的樣子。

那么，這樣的一個交互效果如何實現呢？

詳細的教程我就不寫了，直接上交互截圖和源文件就好了。

好多操作步驟是吧？

實際上，只需要在一張圖片上完成這些設置，剩下不管有多少張圖片都是復制粘貼而已。

這里主要說一下這些交互內容中的關鍵點。

首先，需要兩個變量記錄當前展示的圖片編號，和上一個展示的圖片編號，通過這兩個編號值的大小決定當前展示的圖片是否移動。

例如，鼠標指針從右側滑向左側的時候，實際上只需要前一個圖片向右移動，當前展示的不需要移動位置。

所以，鼠標指針移入時，做了選中當前圖片的操作，并且在【選中時】，進行了判斷，如果當前圖片編號(圖片名稱用數字編號命名，所以通過“This.name”能夠獲取)大于上一張圖片編號(即當前圖片在上一張圖片右側)，此時向左移動當前圖片。

同樣道理，前一張展示的圖片取消選中時(通過選項組名稱完成取消)，如果圖片編號大于當前展示圖片的編號(在展示圖片右側的圖片)，則向右移動前一張展示的圖片。

但是，通過以上的交互處理，前一張展示圖片和當前展示圖片之外的圖片還不能聯動。

所以，添加了尺寸改變時的交互。

尺寸改變時的交互實際上并沒有相關的操作觸發，而是在每張圖片鼠標移入時，通過【觸發事件】的動作，讓每個元件執行【尺寸改變時】的交互。

在這個交互中，每張圖片都判斷自己所處的位置。

位置在前一張展示圖片右側并且在當前展示圖片左側的圖片全部向左移動。

例如上一張展示圖片是2號，當前展示圖片是6號，此時3、4、5號圖片都應該左移。

位置在前一張展示圖片左側并且在當前展示圖片右側的圖片全部向右移動。

例如上一張展示圖片是5號，當前展示圖片是1號，此時2、3、4號圖片都應該右移。

以上就是這個交互效果實現的整體思路。

~~~~~~~~~~~~ 正文結束 下面沒了 ~~~~~~~~~~~~

小樓老師全新打造Axure RP 9精品課程，以獨有的教學方法與技巧，幫助你以最短的時間高效的完成學習目標。

《Axure RP 9 萌新修煉視頻》-----從零入門進階的優質課程------【點此查看詳情】

喜歡 (49)or分享 (0)

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的axure 图片切换图片的交互_AxureRP8中实现伸缩式的图片展示交互效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。