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

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

2、首先拖入一個(gè)動態(tài)面板，命名為d，大小為387×121，將小圖按照順序排列好，根據(jù)美觀度自主調(diào)節(jié)圖片間距如下圖：

3、點(diǎn)進(jìn)去d的狀態(tài)1，將小圖全部選中轉(zhuǎn)換為動態(tài)面板，命名為d1，d1展示全部的5張小圖，而d則展示4張小圖，如下圖：

4、在d1中拖入一個(gè)矩形框，外框設(shè)置為紅色，顏色設(shè)為透明，如下圖：

5、將大圖放置在小圖的上方，并轉(zhuǎn)換為動態(tài)面板，命名為d_big，如下圖：

6、給五張小圖分別命名：small_1、small_2、small_3、small_4、small_5，設(shè)置鼠標(biāo)移入移出事件，當(dāng)鼠標(biāo)移入時(shí)，設(shè)置紅色外框（命名為wk_red），移動到小圖的坐標(biāo)位置（x,y），這里用到函數(shù)[[LVAR1.x]]、[[LVAR1.y]]，其中LVAR1代表的是元件小圖，同時(shí)設(shè)置大圖根據(jù)小圖進(jìn)行狀態(tài)切換，效果如下圖：

7、在小圖兩邊畫上左右箭頭，點(diǎn)擊左箭頭，讓d1向左移動一定距離，點(diǎn)擊右箭頭，讓d1向右移動一定距離，向左距離為負(fù)值，向右移動為正值。具體參考下圖：

8、效果預(yù)覽

二、能力提升

以下實(shí)現(xiàn)這個(gè)效果的方法，并不是最簡便的方法，也并不是最完美的方法，只是最基礎(chǔ)的方法，這個(gè)實(shí)現(xiàn)方法簡單易懂，還有實(shí)現(xiàn)起來復(fù)雜，最終效果更逼真，更方便的方法，這里不再做特別說明，大家下去自己研究。ps:原型只是工作的一種手段，并不需要在這上面花費(fèi)太多精力，不過，多了解一點(diǎn)知識總是好的。

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

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

3、設(shè)置頁面載入時(shí)事件，獲取follow_1~4的坐標(biāo)值。

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

5、設(shè)置鼠標(biāo)的懸停事件，當(dāng)鼠標(biāo)處于不同區(qū)域時(shí)，顯示不同標(biāo)記的follow。具體設(shè)置如下圖：

6、設(shè)置不同follow顯示時(shí)，對應(yīng)右邊圖片也跟隨變換

相關(guān)推薦：

Axure設(shè)計(jì)的網(wǎng)頁怎么生成html文件?

Axure RP 8怎么制作圖形排除重疊位模型?

Axure RP 8怎么利用按鈕控制單選框和復(fù)選框?

最新評論