本文是關於電商網站圖片放大鏡的實現效果，一起來文中看看~
為了加深對動態面板的理解，所以嘗試了圖片放大鏡實現效果，中間也遇到一些小問題。該練習主要用到元件跟隨滑鼠移動、動態面板。
一、分析
實現效果：
倒推需要實現的功能：
放大鏡在圖片內跟隨滑鼠移動；滑鼠移動顯示該區域的放大圖片；原圖片放大。
二、準備
需要放大的圖片：小圖放大不清晰，所以直接選擇了清晰的大圖作為放大之後的圖片，等待放大的底圖在該圖片基礎上等比例縮小。案例圖片大小：【760×760】。放大鏡：矩形元件，填充顏色，設置不透明度，然後轉換為圖片。
說明：底圖和需要放大的圖片大小根據自己需要放大的倍數等比例縮放，放大鏡的大小至少為底圖大小的一半，案例放大倍數1倍，放大的圖片【760×760】，底圖【380×380】，放大鏡【190×190】。
三、交互
思路：滑鼠移入底圖顯示放大鏡，設置放大鏡跟隨滑鼠移動，然後顯示被放大後的圖片。
（1）放大圖和放大鏡分別轉換為動態面板，命名與元件名相同，然後隱藏，放大圖轉換為動態面板後更改大小為【380×380】。
（2）頁面添加【頁面滑鼠移動】事件，顯示放大鏡動態面板，設置放大鏡的中心點跟隨滑鼠移動（放大鏡寬高的一半，分別減去坐標xy），所以插入變量時，設置為：[[Cursor.x-95]]。
注意：放大鏡移動選擇絕對距離。
預覽之後會發現，放大鏡可以移出底圖邊界，需要設置不能移出邊界，在移動放大鏡時添加邊界，用到元件函數的top、left、right、bottom函數。
接下來實現圖片被放大的效果，顯示放大圖動態面板，設置移動放大圖。
放大倍數為1，所以x的移動位置坐標為『0-（放大鏡動態面板.x）*2』；如果頁面元素左上角坐標為（0，0），則直接輸入表達式『[[0-(LVAR1.x)*2]]』；為了方便之後復用，元素左上角坐標不一定為（0，0），移動坐標加上底圖坐標，即『[[0-(LVAR1.x)*2+(LVAR2.x)*2]]』；之後再用時只需要修改圖片，就不用重新設置移動的坐標位置。
（3）整個案例到這裡基本完成了，但是會發現滑鼠移出底圖時，放大鏡和放大圖依然能顯示，不符合邏輯，在事件中添加條件，如果滑鼠移動超出底圖區域，隱藏放大鏡和放大圖，否則顯示。
四、總結
案例不難，但是要注意每次選擇移動元件時，選擇面板還是圖片，還有移動的位置坐標。
本文由 @ Lris 笑笑 原創發布於人人都是產品經理。未經許可，禁止轉載
題圖來自 Pexels，基於 CC0 協議