商品圖片，在滑鼠移到就有放大的效果，這就情況該如何實現？

學習做京東、淘寶等購物網站，滑鼠移入商品圖片上就有放大的效果，如何實現：

選中商品小圖，顯示對應的商品中圖（簡版不做說明）

滑鼠移動到商品中圖，滑鼠跟隨框顯示並始終跟隨，移出商品中圖則隱藏

滑鼠移動到商品中圖，商品大圖顯示並移動到指定位置

一、元件佈局

涉及的元件主要是圖片，商品圖片從網上下載高畫質大圖，用圖片處理軟體，將商品大圖設為800*800規格，商品中圖為400*400規格，商品小圖設為50*50規格。

中圖和小圖如上圖佈局後，在中圖旁邊新增動態面板800設定為400*400規格，將商品大圖放入state1裡，在商品中圖上新增矩形200*200規格，重新命名為滑鼠跟隨，設定不透明度24%，顏色粉色，商品圖片按照規格重新命名。

將滑鼠跟隨和商品大圖預設設定為隱藏，如圖中兩處可以設定。

二、新增事件

（1）選中商品小圖，顯示對應的商品中圖（簡版不做說明）

（2）滑鼠移動到商品中圖，滑鼠跟隨框顯示並始終跟隨，移出商品中圖則隱藏

先設定條件，滑鼠移動時，有互動效果的範圍，就在商品中圖範圍內，設定座標的邊界。函式cursor。x或者y，是指滑鼠的x軸y軸的座標，為全域性變數可以從中選到或者直接輸入使用，不用定義。區域性變數為商品中圖，他有上下左右4個屬性。具體範圍如圖示設定。

注：最後一個條件，動態面板800的面板狀態為state1，是為了多圖切換用，簡版不做切換不加也行。

情形新增後，下方會有新增按鈕，點選新增元件顯示動作，選擇滑鼠跟隨矩形顯示即可，滑鼠移出隱藏在最後所有情形之外設。

新增動作移動，目標選擇滑鼠跟隨，此處為了設定矩形跟隨滑鼠移動的位置，因為滑鼠位於矩形的中間，矩形的定位點在左上角，有位置差。

到達的x軸=滑鼠x軸-滑鼠跟隨的寬的一半，因為目標已經是滑鼠跟隨矩形，所以用了target全域性變數，他的屬性是寬和高。同理得y軸座標，邊界同滑鼠。

（3）滑鼠移動到商品中圖，商品大圖顯示並移動到指定位置

新增動作顯示，選擇目標動態面板800顯示，一般商城商品中圖旁邊會有商品的資訊，此時商品大圖顯示後要選擇置於頂層，新增動作移動，注意此處目標選擇動態面板state1裡面的圖片，如果是多圖，則設定多個狀態（state）每個裡面單獨放商品大圖，跟情形裡面的面板狀態對應選擇。

商品大圖到達的位置應該為滑鼠跟隨矩形座標到商品中圖座標的倍數，這個倍數等於商品大圖/商品中圖，為了簡化設計一開始製作就設為了2倍大。因為商品大圖在state1的移動位置是跟滑鼠逆向的，X和Y軸座標都應該為負。

到達X座標：-［［（LVAR2。x- LVAR1。x）*2 ］］同理得Y座標： -［［（LVAR2。y- LVAR1。y）*2 ］］

為了不混淆，LVAR1還是跟之前的區域性變數一樣，為商品中圖，LVAR2為滑鼠跟隨矩形。

全部設定完畢後，最後增加如果非任何一種情況，則隱藏矩形和動態面板。

注意：條件新增選項框什麼都不用填，直接確定即可。

本文由 @粉小妞Holly 原創釋出於人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基於CC0協議