axure圖片放大器源文件是一個商務(wù)網(wǎng)站適用的圖片放大文件，意思就是用戶在滑動鼠標(biāo)經(jīng)過產(chǎn)品圖片時，可以實現(xiàn)放大圖片的功能，這樣有利于用戶體驗，小編提供這個源文件，供大家參考學(xué)習(xí)。

相關(guān)介紹

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

axure源文件說明

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

動態(tài)面板的拖動事件

拖動動態(tài)面板時同步移動圖片

全局變量與局部變量的用法

部件的移動范圍的限制，這是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ù)：

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

這個小例子里需要介紹的內(nèi)容基本涉及了