前幾天看到有人介紹了axure8的圖片放大原型設(shè)計(jì)步驟（http://www.codemsi.com/rp/246879.html），挺不錯(cuò)的，可惜，我的axure目前用的不是8，還木有那么高大全，于是乎，我就想不如用現(xiàn)有的7.0做一做，分享給大家，且看下文步驟~

1.準(zhǔn)備工作

• 打開(kāi)Axure7.0（純屬?gòu)U話，大家這么聰明都知道的~嘻嘻~）
• 左側(cè)工具欄，拖拉出矩形框2個(gè)
• 一個(gè)矩形框設(shè)置成200*200大小，一個(gè)設(shè)置成400*400
• 兩張圖片，一張縮略圖（命名小圖），一張放大圖（命名大圖），兩張圖片最好是等比的，看著效果更佳
• 將錯(cuò)略圖放到200*200的矩形框內(nèi)

準(zhǔn)備工作暫時(shí)告一段落。

看看放大圖片必要的元素還缺少些什么？嗯，就是放大鏡！Of course，也有很牛掰的不用放大鏡，鼠標(biāo)放到縮略圖上就放大圖片，原理都是相同的啦，我這里放個(gè)放大鏡，方便看效果~~~~~~

2.添加放大鏡

• 左側(cè)工具欄，拖拉出矩形框一個(gè)
• 將矩形框設(shè)置成40*40大小
• 邊框設(shè)置成綠色（顏色隨你喜歡），填充設(shè)置成透明（這個(gè)必須，不然就看不到后面圖片了哦）
• 將放大鏡矩形框移動(dòng)到縮略圖片上

Yeah，放大鏡制作完成，來(lái)看下預(yù)覽效果。咦？放大鏡不能移動(dòng)，What’s wrong？？？？？？Calm down，還沒(méi)有給放大鏡添加動(dòng)態(tài)效果。

放大鏡動(dòng)畫(huà)效果：鼠標(biāo)移入圖片顯示放大鏡；鼠標(biāo)移出隱藏放大鏡；放大鏡跟隨鼠標(biāo)移動(dòng)；

• 點(diǎn)擊選中縮略圖
• 右側(cè)交互區(qū)添加交互事件，選擇“鼠標(biāo)移入時(shí)”，顯示“放大鏡”
• 再添加交互事件，選擇“鼠標(biāo)移出時(shí)”，隱藏“放大鏡”
• 在頁(yè)面交互區(qū)添加頁(yè)面交互事件，選擇“頁(yè)面鼠標(biāo)移動(dòng)時(shí)”，移動(dòng)“放大鏡”，設(shè)置x和y距離，一定要選擇“絕對(duì)距離”（不這么做的你看看是什么效果，認(rèn)真臉），添加函數(shù)即點(diǎn)擊fx打開(kāi)變量面飯，插入函數(shù)Cursor.x和Cursor.y（為了使鼠標(biāo)顯示在放大鏡中間樣子更好看，設(shè)了Cursor.x-20和Cursor.y-20，猜猜為什么是-20而不是-10或-60？就是這么調(diào)皮，啦啦啦~）

來(lái)來(lái)來(lái)預(yù)覽一下。嗯，移動(dòng)可以了，但是一開(kāi)始放大鏡就顯示出來(lái)了，這你逗人玩嗎？NoNoNo，忘記一步。

• 右鍵放大鏡，選擇隱藏

好了，再來(lái)預(yù)覽一下，保證是好的~如果還不行，真的不是我的問(wèn)題，不是我的問(wèn)題，不是我的問(wèn)題！

放大鏡搞完了，還沒(méi)有放大圖，下面就來(lái)設(shè)置放大圖。

3.添加放大圖

• 左側(cè)工作區(qū)拉出一個(gè)動(dòng)態(tài)面板
• 設(shè)置動(dòng)態(tài)面板大小為398*398（沒(méi)設(shè)成400是為了顯示矩形邊框）
• 將動(dòng)態(tài)面板（命名放大圖）放到400*400的矩形框上，居中對(duì)齊，露出矩形邊框
• 右側(cè)部件管理，點(diǎn)擊動(dòng)態(tài)面板下的state1，添加放大圖片（演示用的1200*1200，圖片命名為大圖）

圖片放好了，那接下來(lái)就是看它怎么配合放大鏡移動(dòng)。別害怕，很簡(jiǎn)單的：

• 頁(yè)面交互區(qū)添加交互事件，選擇“頁(yè)面鼠標(biāo)移動(dòng)時(shí)”，移動(dòng)放大圖（勾選的是“大圖”圖片，別勾選成動(dòng)態(tài)面板?。。。。?/li>
• 設(shè)置移動(dòng)距離x和y，再次強(qiáng)調(diào)選擇“絕對(duì)距離”，點(diǎn)擊fx添加函數(shù)式
• 新增局部變量LVAR1，選擇“部件”=小圖（縮略圖），插入函數(shù)式[[(LVAR1.left-Cursor.x+20)*5]]，同理設(shè)置y的函數(shù)式[[(LVAR1.top-Cursor.x+20)*5]]

.left代表大圖的x坐標(biāo)，.top代表大圖的y坐標(biāo)，Cursor.x和.y代表放大鏡當(dāng)前停留位置的x和y坐標(biāo)（前面設(shè)了-20，所以上面有+20）。（大圖坐標(biāo)-小圖坐標(biāo)）*放大倍數(shù)=當(dāng)前放大圖該顯示的部分，上面函數(shù)式的*5就是圖片的放大倍數(shù)，大圖的比例最好是>=函數(shù)式上的放大倍數(shù)

完事具備，趕快預(yù)覽去吧！

寫(xiě)完這些，感覺(jué)自己萌萌噠~~~~~~~~~

原型預(yù)覽：http://fvh0oa.axshare.com

作者提供源：

原型下載：http://pan.baidu.com/s/1eRd6reE ? ? 密碼：nv8y

人人官方源：

鏈接：http://pan.baidu.com/s/1pKbmik7? ?密碼：eq4h

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