瀏覽電商商品的詳情頁時，經常會看到圖片放大器的運用，這是如何實現的呢？本文以京東商品詳情頁為例，運用Axure RP快速設計原型工具來制作這樣的原型效果。案例綜合運用了鼠標移入事件、鼠標移動事件、元件的移動、元件的顯示/隱藏等交互動作。

為達到更好的效果，建議大家先安裝Axure RP，邊閱讀文章邊操作。（號外：慧都網·1024程序員節活動正在火熱進行中，Axure RP現金優惠券免費贈送，點擊了解詳情>>>）

點擊下載Axure RP正式版

觀察交互

首先，一起來觀察京東詳情頁中的圖片放大效果。當鼠標在左側圖片上方移動時，圖片上方會出現一個半透明的圖層跟隨鼠標移動，我們將這個半透明的圖層稱之為放大鏡。同時在原圖右側會出現一張放大版的高清大圖，高清大圖顯示的圖片信息與左側半透明圖層下的圖片信息一致。鼠標移出原圖范圍邊界時，放大鏡不再移動，且右側的高清大圖消失。商品圖片下方有多張縮略圖，鼠標在這些縮略圖之間來回移動可切換上方的商品圖片。鼠標停留在縮略圖上方時，縮略圖會有一個選中效果，邊框變為了紅色。如圖1：

思路分析

商品原圖以及放大版的高清大圖可以用動態面板盛放，動態面板的每個狀態放置一張商品圖片。商品圖片及高清大圖這兩個動態面板中的圖片順序盡量保持一致。兩個動態面板的尺寸相同，這里切記不要勾選自適應內容。通過為頁面設置鼠標移動事件、控制放大鏡的移動、放大鏡隨鼠標移動、放大鏡在水平方向的位置為鼠標的橫坐標-放大鏡一半的寬度，垂直方向的位置為鼠標的縱坐標-放大鏡一半的高度。

在設置交互之前，我們需要添加一些邏輯判斷條件，限制鼠標的移動范圍，即鼠標僅能在商品圖片的動態面板內移動。在這個交互事件中，我們還需要確定高清大圖的坐標位置。與商品原圖不同的是，商品原圖上方的放大鏡在移動，商品圖片不動；右側的高清大圖在移動，上方的放大鏡不動（這里的放大鏡用于輔助理解，實際上不存在）。所以高清大圖的移動距離=放大鏡相較于商品原圖的移動距離x圖片的放大倍數（高清大圖的尺寸/商品原圖尺寸）。放大鏡的移動距離=放大鏡的坐標-商品原圖的坐標。放大鏡的默認位置與商品圖片的位置一致，這里建議放大鏡的尺寸大于等于商品圖片的一半尺寸。默認隱藏放大鏡和高清大圖的動態面板。縮略圖切換商品圖片這一交互效果，可以通過鼠標移入事件來顯示不同的商品原圖和高清大圖。

制作原型

元件準備

拖動一個動態面板至設計區域，為動態面板增加5個狀態，每個狀態頁面中放大一張商品圖片，商品圖片尺寸為400x400。再從元件庫拖動一個動態面板至右側，為動態面板增加5個狀態，每個狀態頁面中放置一張高清大圖，大圖尺寸為800x800。放置一個紅色半透明的矩形至商品圖片動態面板的上方，矩形尺寸為200x200，矩形與商品圖片位置相同。如圖2：

放大圖片

為頁面設置鼠標移動事件、添加邏輯條件，當鼠標的移動范圍不超出原圖動態面板的邊界且動態面板狀態為圖1時，顯示放大鏡，移動放大鏡至絕對位置（[[Cursor.x-Target.width/2]]，[[Cursor.y-Target.height/2]]），顯示高清大圖1，移動高清大圖1至絕對位置（[[(LVAR2.x-LVAR1.x)2]]，[[(LVAR2.y-LVAR1.y)2]]）。

案例中有5張商品圖片，同樣的原理，為另外4張商品圖片設置交互情形。最后還要為商品添加一個情形，即當鼠標移出商品圖片邊界外時，隱藏放大鏡和高清大圖。

圖3：

圖4：

切換商品圖片

將5張商品縮略圖設置為一個選項組，為縮略圖設置選中樣式，即選中時邊框線為紅色。為每個縮略圖添加鼠標移入事件、選中縮略圖、切換商品圖片和高清大圖的動態面板狀態，顯示對應的圖片。圖5：

圖6：

到這里，原型已經制作完畢。

*想要獲得 Axure RP 更多資源或正版授權的朋友，可以咨詢了解哦~

慧都網·1024程序員節，DevExpress、MyEclipse、Axure RP、Aspose、FastReport等產品限時放“價”，給你專屬寵愛！點擊下方圖片查看活動詳情↓↓↓