本章介紹如何使用指針函數實現鼠標區域的商品的放大，廣泛應用于商品細節展示。

案例簡介

鼠標進入商品圖標時，商品圖標呈現選中狀態，同時商品圖片相應改變；鼠標進入商品圖片時，有綠色半透明矩形跟隨鼠標移動，但是不超出商品圖片范圍；同時，右側出現綠色半透明矩形所覆蓋區域的放大圖片；鼠標離開圖片時，綠色半透明矩形放大圖片消失。

案例實際效果

原件命名：

• ? ? 圖片（用于商品圖片）：GoodsImage
• ? ??圖片（用于放大圖片）：LargeImage
• ? ??圖片（用于商品圖片）：Areapanel
• ? ??圖片（用于商品圖片）：ZoomInPanel

以下是詳細教程，請大家慢慢食用。

Axure RP 8 教程-指針函數之商品圖片放大

1. 將元件庫的圖像拖入到工作臺，將其命名為GoodsImage，尺寸設定為(w：400 ? H：400)

2. 拖入動態面板，將其命名為ZoomInPanel，尺寸設定為(w：400 ? H：400)。

雙擊此面板，布置內容

在state1中，拖入一個圖像，將其命名為LargeImage，尺寸設定為(w：800 ? H：800）

3. 拖入第二個動態面板，將其命名為Areapanel，尺寸設定為(w：200 ? H：200）.

4. 拖入小矩形，編號命名為1，尺寸設定為(w：70 ? H：70）。

5. 設置1號矩形的選中狀態，線條顏色為紅，并且候選選中框（注意，只有編號1的矩形需要勾選，后面復制粘貼的時候后面四個取消勾選）

6. 復制粘貼五個矩形，注意后面四個矩形不勾選選中框，依次命名為“1”~“5”.

7. 為編號矩形“1”~“5”設置用例，先設置選中狀態值到編號圖像1值為真。

8. 再按照順序，依次給五個圖像導入圖片（事先在本地準備好的五張商品圖片）。

9. 編輯好五張編號圖片之后，選中熱區，點擊更多事件選擇鼠標移動時，為熱區編輯用例。

10. 為熱區元件的“鼠標移動時”時間添加“用例1”，設置動作“移動”動態面板“AreaPanel”絕對位置到達 {x}[[Cursor.x-Target.width/2]] ? {y}[[Cursor.y-Target.height/2]]的位置；同時設置“左側”邊界“>=”[[This.right]],“右側”邊界“<=”[[This.left]],“上側”邊界“>=”[[This.top]],“下側”邊界“<=”[[This.bottom]].

設置動作“移動”動態面板“AreaPanel”絕對位置到達

• {x}[[Cursor.x-Target.width/2]] ?
• {y}[[Cursor.y-Target.height/2]]

同時設置

• “左側”邊界“>=”[[This.right]]
• “右側”邊界“<=”[[This.left]]
• “上側”邊界“>=”[[This.top]]

“下側”邊界“<=”[[This.bottom]]

11. 繼續上一步，在同一個動作列表選擇元件“LargeImage”，設置該元件“絕對位置到達” {x}[[-(a.x-This.x)*2]] {y} [[-(a.y-This.y)*2]]的位置；“a”為局部變量的名稱，其內容為動態面板“AreaPanel”。

設置該元件“絕對位置到達”

• {x}[[-(a.x-This.x)*2]]
• {y}[[-(a.y-This.y)*2]]

選擇絕對位置到達。

12. 繼續為熱區添加新的用例，選中新的動作“鼠標移入時”，編輯新的用例，顯示兩個動態面板。

13. 繼續為熱區添加新的用例，選中新的動作“鼠標移出時”，編輯新的用例，隱藏兩個動態面板。

14. 完工后對比一下全部用例。

15. 添加圖片，按照之前添加的次序添加以及準備好的圖片。

LargeImage里的state1里的圖片。

16. 設置動態面板AreaPanel為半透明綠色。

17. 收工，預覽效果下。

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

題圖來自 Pexels，基于 CC0 協議