本章介紹如何使用指針函數(shù)實現(xiàn)鼠標區(qū)域的商品的放大，廣泛應用于商品細節(jié)展示。

案例簡介

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

案例實際效果

原件命名：

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

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

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

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

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

雙擊此面板，布置內(nèi)容

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

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

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

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

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

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

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

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

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

設置動作“移動”動態(tài)面板“AreaPanel”絕對位置到達

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

同時設置

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

“下側(cè)”邊界“<=”[[This.bottom]]

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

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

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

選擇絕對位置到達。

12. 繼續(xù)為熱區(qū)添加新的用例，選中新的動作“鼠標移入時”，編輯新的用例，顯示兩個動態(tài)面板。

13. 繼續(xù)為熱區(qū)添加新的用例，選中新的動作“鼠標移出時”，編輯新的用例，隱藏兩個動態(tài)面板。

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

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

LargeImage里的state1里的圖片。

16. 設置動態(tài)面板AreaPanel為半透明綠色。

17. 收工，預覽效果下。

本文由 @Arthur 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Pexels，基于 CC0 協(xié)議