本文詳細地為大家展示了如何用Axure，實現(xiàn)商品詳情頁中的放大鏡效果，enjoy~

網(wǎng)站上面已經(jīng)有一些關于放大鏡效果的文章，但敘述的不是很詳細，像我這樣的小白可能看暈，我最近剛好學習到這里，所以且嘗試把學到的盡可能詳細的敘述出來，故本文長且詳細，高手請直接忽略本文。

先看demo預覽效果：

制作步驟

一、放置圖片和移動的小矩形，并讓其動起來；

二、放置高清大圖，讓圖片跟隨黃色小矩形移動而移動，實現(xiàn)放大鏡效果；

三、原圖下面的縮略圖點擊切換效果。

動手制作

放置圖片和移動的小矩形，并讓其動起來

1. 按照步驟進行，首先準備一張矩形高清大圖，放入axure中，選中將圖片等比例縮小調(diào)整至合適大小(需要先計算好縮小的多少，比如我就是將900*600的圖片的寬高縮小1/2，也就是450*300px，方便后續(xù)放大鏡效果的實現(xiàn))；

2. 拖入矩形元件，取名“移動顯示小塊”（隨意），調(diào)整透明度和大小，充當鼠標移動顯示區(qū)域（該矩形元件也需要計算大小，其大小計算方式：

原高清大圖：縮小后的圖=縮小后的圖：該矩形元件），原因是下圖中左邊紅色的移動顯示區(qū)域=右邊的紅色顯示窗口。

3. 讓移動顯示區(qū)域動起來，在黃色的小矩形上面加一層和圖片一樣尺寸的透明的矩形元件，取名“浮層”（原因是不加浮層，黃色小矩形不能實時的移動）。

移動黃色小矩形：

選中浮層，添加【鼠標移動時】事件，移動黃色矩形“移動顯示小塊”。

說明：給浮層添加鼠標移動事件，【鼠標移動時】移動黃色矩形為鼠標的X軸和Y軸的位置(Cursor.X)，但是要減掉黃色矩形寬高的一半，保證鼠標移動時的位置就是黃色矩形的中心。

注意：事件中的Target是指黃色矩形，This指浮層。

到這一步能夠實現(xiàn)如下效果：

設置邊界：

設置上下左右的邊界，讓黃色矩形移動時不能超出圖片的范圍。

說明：還是在【鼠標移動時】，點擊添加用例，需要注意的是：

a)判斷元件的top、botton、left和right時需要先添加局部變量獲取到該元件之后再用.left獲取其左邊的值，上圖中fuceng_div指浮層，move_div指黃色的小矩形。

b)判斷上下左右邊界的條件是單獨的，并且是四個if判斷條件，而非else if，在創(chuàng)建判斷后選中該用例右鍵就能將else if轉換為if判斷。

c)在判斷下邊界和右邊界時需要減去黃色矩形自身的寬度以及高度。

放置高清大圖，讓大圖片跟隨黃色小矩形移動而移動，實現(xiàn)放大鏡效果

進行到這一步就已經(jīng)成功一半了，能夠實現(xiàn)黃色的小矩形在圖片的范圍內(nèi)隨意移動，接下來的工作就比較好辦了。

接下來放置右邊的放大鏡顯示區(qū)域，這里用一個動態(tài)面板，里面放置最初準備的高清大圖(我準備的是900*600的圖片)，把圖片命名后坐標設置為(0,0)；

實現(xiàn)思路：

黃色小矩形之于圖片就相當于動態(tài)面板之于面板中的高清大圖片，黃色小矩形移動多少距離，動態(tài)面板中的大圖片就得移動相應的距離乘大圖是小圖的多少倍，才能實現(xiàn)同步移動的效果。

需要注意的是，原圖移動的是黃色的小矩形，而動態(tài)面板中移動的是大圖的圖片。要實現(xiàn)同步移動，需要計算出小矩形移動的距離，再把大圖向負的方向移動小矩形移動距離的倍數(shù)。

即：大圖移動的距離=-（小圖移動的距離*小圖之于大圖的倍數(shù)）。

著手實現(xiàn)：

給黃色的小矩形添加【移動時】的用例，讓小矩形移動時，右邊動態(tài)面板中的圖片也跟隨移動。

用思路中的公式，計算xy的值，這里乘以2是因為大圖是小圖的2倍，小圖移動一像素，大圖就得移動兩像素：

再按照相同的公式計算出Y的值，就能實現(xiàn)如下效果：

放大鏡效果就制作完成了，接下來最后一步：

原圖下面的縮略圖點擊切換效果

原理：利用中繼器，存儲四套三種尺寸的圖片（縮略圖，正常圖，高清大圖），再把中繼器中的圖片加載到相應的位置，然后加上點擊事件即可。

實現(xiàn)思路：拖放中繼器，進入中繼器后放置一張小圖占位，再把準備好四套三種尺寸的圖片依次右鍵導入到中繼器的數(shù)據(jù)列中，然后給中繼器加上【每項加載時】用例，把每列數(shù)據(jù)圖片的值加載到相應位置，最后給占位的小圖加上點擊事件。

拖入中繼器，放入縮略占位小圖：

編輯好中繼器數(shù)據(jù)列名，右鍵導入圖片，添加每項加載時用例，加載出圖片。

給占位小圖添加點擊事件。

再給黃色小矩形和動態(tài)面板加上移入移出效果，所有功能就實現(xiàn)完畢。

Axure源文件：https://pan.baidu.com/s/1WN-opfWcBhuBnXGZFKOYLg

提取碼：qonn

本文由 @Sakura 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉載

題圖來自Unsplash，基于CC0協(xié)議