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

相關(guān)介紹

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

axure源文件說(shuō)明

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

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

拖動(dòng)動(dòng)態(tài)面板時(shí)同步移動(dòng)圖片

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

部件的移動(dòng)范圍的限制，這是axure8里的新用法

使用方法

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

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

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

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

正方形拖動(dòng)事件

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

約束移動(dòng)范圍

下面就是在移動(dòng)正方形時(shí)，同時(shí)移動(dòng)放大的圖片到指定位置，這樣看起來(lái)就像是在給原圖做放大操作，計(jì)算放大圖片的位置如下：

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

計(jì)算大圖片移動(dòng)位置

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

計(jì)算圖片縮放比率

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

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

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

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