axure圖片放大器源文件

axure圖片放大器源文件是一個商務網站適用的圖片放大文件，意思就是用戶在滑動鼠標經過產品圖片時，可以實現放大圖片的功能，這樣有利于用戶體驗，小編提供這個源文件，供大家參考學習。

相關介紹

圖片放大器的典型場景是電子商務網站，鼠標經過縮略圖時，顯示產品放大圖片，供用戶查看細節。這里是個簡單的例子，鼠標經過時顯示放大圖片，拖動綠色正方形框并移動，會顯示對應位置的放大圖片。

axure源文件說明

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

動態面板的拖動事件

拖動動態面板時同步移動圖片

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

部件的移動范圍的限制，這是axure8里的新用法

使用方法

一、準備圖片資源

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

二、添加正方形動態面板的拖動事件

只需要處理拖動事件即可，拖動正方形時，移動正方形到當前鼠標位置。

正方形拖動事件

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

約束移動范圍

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

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

計算大圖片移動位置

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

計算圖片縮放比率

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

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

初始化全局變量和設置放大圖片大小

這個小例子里需要介紹的內容基本涉及了