axure圖片放大器源文件

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

相關介紹

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

axure源文件說明

當然，這（zhè）裏並沒有真（zhēn）正放大（dà）圖（tú）片，隻是用兩張圖片來表（biǎo）示，一張表示小圖，一張表（biǎo）示（shì）放大後的圖片。可學（xué）習（xí）的知識（shí）點如下：

動態麵板的拖動事（shì）件

拖動（dòng）動（dòng）態麵（miàn）板（bǎn）時同步移動（dòng）圖（tú）片（piàn）

全局變量與局部變量（liàng）的（de）用法

部件（jiàn）的（de）移動範圍的限製（zhì），這是axure8裏的新用法

使（shǐ）用方法

一、準備圖片資源

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

二、添加（jiā）正（zhèng）方形動態（tài）麵（miàn）板的拖動事件

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

正方形拖動事件

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

約束移動範圍

下麵就（jiù）是在（zài）移動正方形時，同時移動放大（dà）的圖片（piàn）到指（zhǐ）定位（wèi）置，這（zhè）樣看（kàn）起來就像是在給原圖做放大操作，計算放大圖片的（de）位置如下：

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

計算大圖片移動位置

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

計算圖（tú）片縮放比（bǐ）率

三、初（chū）始化全（quán）局（jú）變量和設（shè）置放（fàng）大圖片大小

使用了rate來保存放大圖片與（yǔ）原圖片之間（jiān）的放大比率，頁麵加載（zǎi）時（shí）計算這個比率，並設置放大圖（tú）片的放大（dà）倍數：

初始化全局變量和設置放大（dà）圖（tú）片大小

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