在閱讀粉小妞Holly的《Axure教程：商品圖片放大效果制作步驟詳解（簡版）》文章后，發現跟自己的Axure8.0版本不一樣，因此，根據教程及本人理解后，給讀者補交另外一篇教程；在此，感謝粉小妞Holly作者的分享。

效果如下：

一、頁面布局

（1）拉入一張大小為400400和800800的照片；分別命名為小圖和大圖，并將大圖轉為動態面板，命名為放大窗口，大小設置為400*400。

（2）再拉入一個矩形，背景色填充為粉紅色，20%的透明度，大小為200*200，并命名為放大鏡，如下圖所示：

二、設置全局變量

不選中頁面任何元素，添加【頁面載入時】事件，利用全局變量來控制大圖的實際應該移動距離，即通過大圖的寬度除以小圖的寬度，得到放大的倍數。此全局變量在后面的移動距離計算公式中需要用到，設置如下圖所示：

三、添加交互

選中【小圖】，添加【鼠標移動時】交互效果。

（1）設置顯示效果

元件》顯示》勾選放大鏡和放大窗口，設置為顯示，如下圖所示：

（2）設置移動效果

當鼠標移入到小圖時，放大鏡矩形的中心點需要立即跟隨移動到鼠標位置，因此，設置交互事件如下：

1）元件》移動》勾選【放大鏡】矩形，移動為：絕對位置，X軸為：[[Cursor.x-Target.width/2]]，即鼠標的x軸減去放大鏡的一半寬度；Y軸為：[[Cursor.y-Target.width/2]]，即鼠標的Y軸減去放大鏡的一半寬度。

如下圖所示：

2）添加邊界，頂部為：>=[[LVAR1.top]]，點擊【fx】,添加局部變量，如下圖所示：

同理，底部為：<=[[LVAR1.bottom]]；左側為：>=[[LVAR1.left]]；右側為：<=[[LVAR1.right]]。

接下來則設置放大窗口中的大圖移動效果：

3）元件》移動》勾選【大圖】矩形，移動為：絕對位置，X軸為：[[(LVAR1.x-LVAR2.x)*OnLoadVariable]]，即小圖的x軸減去放大鏡的x軸得到的距離，再乘以放大倍數（前面設置的全局變量）；Y軸為：[[(LVAR1.y-LVAR2.y)*OnLoadVariable]]，即小圖的y軸減去放大鏡的y軸得到的距離，再乘以放大倍數。

如下圖所示：

（3）設置移出隱藏效果

注意：如果將【鼠標移出時】隱藏放大鏡和放大窗口的效果加在元件【小圖】上面的話，由于，鼠標剛移入小圖時，放大鏡顯示，遮住下面的小圖，導致觸發移出事件，使放大鏡和放大窗口隱藏。

因此，只能將【鼠標移出時】隱藏放大鏡和放大窗口的效果加在元件【放大鏡】上面。添加后的效果如下圖所示：

仔細觀看效果，會發現，鼠標剛移小圖時，放大鏡和放大窗口能夠正常顯示。但是，當鼠標還是在放大鏡區域移動時，放大窗口里面的大圖并沒有移動。而鼠標移出放大鏡區域時，大圖才跟著移動。

因此，還需要給放大鏡添加與小圖一樣的【鼠標移動時】交互效果，才能平滑正常顯示。交互設置如下圖所示：

四、預覽效果

示例演示：

獲取更多高保真原型和學習更多教程，可關注本人公眾號：艾斯的Axure峽谷。
歡迎大家留言評論，也可以留下你期待看到的交互效果。

總結

以上是生活随笔為你收集整理的Axure教程：淘宝商品图片放大效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。