axure圖（tú）片放大器源文件

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

相關（guān）介（jiè）紹

圖片（piàn）放大器的（de）典型場景是電（diàn）子商務網站，鼠標經過縮略（luè）圖時，顯示產（chǎn）品放大圖片，供用戶查看細節。這裏是個簡單的例子，鼠標經過時顯示放大圖（tú）片，拖動綠色正方形框並移動，會顯示對應（yīng）位置（zhì）的（de）放大圖片。

axure源文件說明

當然，這裏並沒有真正放（fàng）大圖片，隻是用兩張圖片來表示，一張表示小圖，一張表示放大後的圖片。可（kě）學習的知識點如下：

動態麵板的拖動（dòng）事件

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

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

部（bù）件的移動範圍的限（xiàn）製，這是axure8裏的新用法

使用方法

一、準備圖片資源

準備好兩張圖片，一張原圖小一點，一（yī）張放大後的圖片，圖片比例保持一致。在原圖上放一下矩形框，調整大小為正方形，設置（zhì）邊框為綠（lǜ）色，背景為透明。為了支持拖（tuō）動事件，將正方形轉成動態麵板。放大的圖片因為是要在指定區域內顯示，因此我們將圖片（piàn）轉成動態（tài）麵板（bǎn），並（bìng）取消“Fit to Content”選項（xiàng），對應中文（wén）版（bǎn）的就是取消自動適（shì）應動態麵板內容大小的選項（xiàng），這樣在可見區域（yù）範圍外將不可見。

二、添加正方形動態麵板的拖動（dòng）事件

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

正方形拖動事件

正方形拖動範圍限製在原圖的顯示範圍之內，這裏的範圍限製使用了axure8的新特性（xìng） Add boundary，它可以約束部件隻能在某個範圍內移動，例如你（nǐ）要做個（gè）音量調節器，你可以限製音量大小隻在某個（gè）範圍移動。

約束移動範圍

下麵就是在移動正方形時，同時移動放大的圖片到指定位置，這樣看起來（lái）就像（xiàng）是在給原圖做放大操作，計（jì）算放大圖片的位置如下：

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

計算大圖（tú）片移動（dòng）位置

其中rate是放大圖片與原（yuán）圖的比率，如下（xià）計（jì）算：

計算圖片縮（suō）放比率

三、初始化全局變量（liàng）和（hé）設置放大圖（tú）片大小

使用了rate來保存（cún）放大圖片與原圖片之（zhī）間的放大比率（lǜ），頁麵加載時計算這個比（bǐ）率，並設置放大圖片的（de）放（fàng）大倍（bèi）數：

初始化全局變量（liàng）和設置放大圖片大小

這個小例（lì）子裏需要介紹的內容基本涉及了