圖片放大器的典型場景是電子商務(wù)網(wǎng)站，鼠標(biāo)經(jīng)過縮略圖時，顯示產(chǎn)品放大圖片，供用戶查看細(xì)節(jié)。這里是個簡單的例子，鼠標(biāo)經(jīng)過時顯示放大圖片，拖動綠色正方形框并移動，會顯示對應(yīng)位置的放大圖片。

單擊這里查看在線演示（內(nèi)附源文件下載）

當(dāng)然，這里并沒有真正放大圖片，只是用兩張圖片來表示，一張表示小圖，一張表示放大后的圖片?？蓪W(xué)習(xí)的知識點如下：

1. 動態(tài)面板的拖動事件
2. 拖動動態(tài)面板時同步移動圖片
3. 全局變量與局部變量的用法
4. 部件的移動范圍的限制，這是axure8里的新用法

一、準(zhǔn)備圖片資源

準(zhǔn)備好兩張圖片，一張原圖小一點，一張放大后的圖片，圖片比例保持一致。在原圖上放一下矩形框，調(diào)整大小為正方形，設(shè)置邊框為綠色，背景為透明。為了支持拖動事件，將正方形轉(zhuǎn)成動態(tài)面板。放大的圖片因為是要在指定區(qū)域內(nèi)顯示，因此我們將圖片轉(zhuǎn)成動態(tài)面板，并取消“Fit to Content”選項，對應(yīng)中文版的就是取消自動適應(yīng)動態(tài)面板內(nèi)容大小的選項，這樣在可見區(qū)域范圍外將不可見。

二、添加正方形動態(tài)面板的拖動事件

只需要處理拖動事件即可，拖動正方形時，移動正方形到當(dāng)前鼠標(biāo)位置。

正方形拖動范圍限制在原圖的顯示范圍之內(nèi)，這里的范圍限制使用了axure8的新特性 Add boundary，它可以約束部件只能在某個范圍內(nèi)移動，例如你要做個音量調(diào)節(jié)器，你可以限制音量大小只在某個范圍移動。

下面就是在移動正方形時，同時移動放大的圖片到指定位置，這樣看起來就像是在給原圖做放大操作，計算放大圖片的位置如下：

[[-LVAR1.x*rate]]，[[-LVAR1.y*rate]]

其中rate是放大圖片與原圖的比率，如下計算：

三、初始化全局變量和設(shè)置放大圖片大小

使用了rate來保存放大圖片與原圖片之間的放大比率，頁面加載時計算這個比率，并設(shè)置放大圖片的放大倍數(shù)：

這個小例子里需要介紹的內(nèi)容基本涉及了，詳細(xì)可查看在線演示并下載源文件自己看一下吧。

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