国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

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

案例簡(jiǎn)介

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

案例實(shí)際效果

原件命名：

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

以下是詳細(xì)教程，請(qǐng)大家慢慢食用。

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

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

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

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

在state1中，拖入一個(gè)圖像，將其命名為L(zhǎng)argeImage，尺寸設(shè)定為(w：800 ? H：800）

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

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

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

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

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

8. 再按照順序，依次給五個(gè)圖像導(dǎo)入圖片（事先在本地準(zhǔn)備好的五張商品圖片）。

9. 編輯好五張編號(hào)圖片之后，選中熱區(qū)，點(diǎn)擊更多事件選擇鼠標(biāo)移動(dòng)時(shí)，為熱區(qū)編輯用例。

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

設(shè)置動(dòng)作“移動(dòng)”動(dòng)態(tài)面板“AreaPanel”絕對(duì)位置到達(dá)

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

同時(shí)設(shè)置

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

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

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

設(shè)置該元件“絕對(duì)位置到達(dá)”

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

選擇絕對(duì)位置到達(dá)。

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

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

14. 完工后對(duì)比一下全部用例。

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

LargeImage里的state1里的圖片。

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

17. 收工，預(yù)覽效果下。

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

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