文章主要對商品詳情頁產品圖的展示原型進行了簡要的說明，希望可以給大家帶來些收獲。

背景介紹

電商平臺商品詳情頁大同小異，有一個模塊是肯定少不了的，就是產品圖展示區域，下面主要就展示圖區的一些小效果做一些說明。

準備工作

網上找一些圖片素材，要分兩批，一批大圖，一批小圖（不想自己找的，文末有素材附件）

功能實現

1、首先拖入一個動態面板，命名為d，大小為387×121，將小圖按照順序排列好，根據美觀度自主調節圖片間距如下圖：

2、點進去d的狀態1，將小圖全部選中轉換為動態面板，命名為d1，d1展示全部的5張小圖，而d則展示4張小圖，如下圖：

3、在d1中拖入一個矩形框，外框設置為紅色，顏色設為透明，如下圖：

4、將大圖放置在小圖的上方，并轉換為動態面板，命名為d_big，如下圖：

5、給五張小圖分別命名：small_1、small_2、small_3、small_4、small_5，設置鼠標移入移出事件，當鼠標移入時，設置紅色外框（命名為wk_red），移動到小圖的坐標位置（x,y），這里用到函數[[LVAR1.x]]、[[LVAR1.y]]，其中LVAR1代表的是元件小圖，同時設置大圖根據小圖進行狀態切換，效果如下圖：

6、在小圖兩邊畫上左右箭頭，點擊左箭頭，讓d1向左移動一定距離，點擊右箭頭，讓d1向右移動一定距離，向左距離為負值，向右移動為正值。具體參考下圖：

7、最終效果如下圖：

能力提升

那么再實現了這樣的效果后，還有另外的一個效果，也用的比較多，如下圖所示：

方法說明

以下實現這個效果的方法，并不是最簡便的方法，也并不是最完美的方法，只是最基礎的方法，這個實現方法簡單易懂，還有實現起來復雜，最終效果更逼真，更方便的方法，這里不再做特別說明，大家下去自己研究。

ps:原型只是工作的一種手段，并不需要在這上面花費太多精力，不過，多了解一點知識總是好的。

實現步驟

1、先拖入一個大小為200×200的矩形框，背景色設置為#666666，透明度為50%，命名為follow_1，然后按住ctrl鍵，復制出三個，分別命名為follow_2,follow_3,follow_4，如下圖：

2、在畫布空白區域，按照下圖所示，拖入文本框，四個文本框，分別命名為：follow_1_x,y，follow_2_x,y，follow_3_x,y，follow_4_x,y。

3、設置頁面載入時事件，獲取follow_1~4的坐標值。

4、拖入動態面板，命名為j_big，將四張切割圖按照順序，放入動態面板中，如下圖。

5、設置鼠標的懸停事件，當鼠標處于不同區域時，顯示不同標記的follow。具體設置如下圖：

6、設置不同follow顯示時，對應右邊圖片也跟隨變換

素材：素材下載

rp文件：rp文件

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