商品圖片，在鼠標(biāo)移到就有放大的效果，這就情況該如何實(shí)現(xiàn)？

學(xué)習(xí)做京東、淘寶等購(gòu)物網(wǎng)站，鼠標(biāo)移入商品圖片上就有放大的效果，如何實(shí)現(xiàn)：

1. 選中商品小圖，顯示對(duì)應(yīng)的商品中圖（簡(jiǎn)版不做說(shuō)明）
2. 鼠標(biāo)移動(dòng)到商品中圖，鼠標(biāo)跟隨框顯示并始終跟隨，移出商品中圖則隱藏
3. 鼠標(biāo)移動(dòng)到商品中圖，商品大圖顯示并移動(dòng)到指定位置

一、元件布局

涉及的元件主要是圖片，商品圖片從網(wǎng)上下載高清大圖，用圖片處理軟件，將商品大圖設(shè)為800*800規(guī)格，商品中圖為400*400規(guī)格，商品小圖設(shè)為50*50規(guī)格。

中圖和小圖如上圖布局后，在中圖旁邊添加動(dòng)態(tài)面板800設(shè)置為400*400規(guī)格，將商品大圖放入state1里，在商品中圖上添加矩形200*200規(guī)格，重命名為鼠標(biāo)跟隨，設(shè)置不透明度24%，顏色粉色，商品圖片按照規(guī)格重命名。

將鼠標(biāo)跟隨和商品大圖默認(rèn)設(shè)置為隱藏，如圖中兩處可以設(shè)置。

二、添加事件

（1）選中商品小圖，顯示對(duì)應(yīng)的商品中圖（簡(jiǎn)版不做說(shuō)明）

（2）鼠標(biāo)移動(dòng)到商品中圖，鼠標(biāo)跟隨框顯示并始終跟隨，移出商品中圖則隱藏

先設(shè)置條件，鼠標(biāo)移動(dòng)時(shí)，有交互效果的范圍，就在商品中圖范圍內(nèi)，設(shè)置坐標(biāo)的邊界。函數(shù)cursor.x或者y，是指鼠標(biāo)的x軸y軸的坐標(biāo)，為全局變量可以從中選到或者直接輸入使用，不用定義。局部變量為商品中圖，他有上下左右4個(gè)屬性。具體范圍如圖示設(shè)置。

注：最后一個(gè)條件，動(dòng)態(tài)面板800的面板狀態(tài)為state1，是為了多圖切換用，簡(jiǎn)版不做切換不加也行。

情形添加后，下方會(huì)有添加按鈕，點(diǎn)擊添加元件顯示動(dòng)作，選擇鼠標(biāo)跟隨矩形顯示即可，鼠標(biāo)移出隱藏在最后所有情形之外設(shè)。

添加動(dòng)作移動(dòng)，目標(biāo)選擇鼠標(biāo)跟隨，此處為了設(shè)置矩形跟隨鼠標(biāo)移動(dòng)的位置，因?yàn)槭髽?biāo)位于矩形的中間，矩形的定位點(diǎn)在左上角，有位置差。

到達(dá)的x軸=鼠標(biāo)x軸-鼠標(biāo)跟隨的寬的一半，因?yàn)槟繕?biāo)已經(jīng)是鼠標(biāo)跟隨矩形，所以用了target全局變量，他的屬性是寬和高。同理得y軸坐標(biāo)，邊界同鼠標(biāo)。

（3）鼠標(biāo)移動(dòng)到商品中圖，商品大圖顯示并移動(dòng)到指定位置

添加動(dòng)作顯示，選擇目標(biāo)動(dòng)態(tài)面板800顯示，一般商城商品中圖旁邊會(huì)有商品的信息，此時(shí)商品大圖顯示后要選擇置于頂層，添加動(dòng)作移動(dòng)，注意此處目標(biāo)選擇動(dòng)態(tài)面板state1里面的圖片，如果是多圖，則設(shè)置多個(gè)狀態(tài)（state）每個(gè)里面單獨(dú)放商品大圖，跟情形里面的面板狀態(tài)對(duì)應(yīng)選擇。

商品大圖到達(dá)的位置應(yīng)該為鼠標(biāo)跟隨矩形坐標(biāo)到商品中圖坐標(biāo)的倍數(shù)，這個(gè)倍數(shù)等于商品大圖/商品中圖，為了簡(jiǎn)化設(shè)計(jì)一開始制作就設(shè)為了2倍大。因?yàn)樯唐反髨D在state1的移動(dòng)位置是跟鼠標(biāo)逆向的，X和Y軸坐標(biāo)都應(yīng)該為負(fù)。

到達(dá)X坐標(biāo)：-[[(LVAR2.x- LVAR1.x)*2 ]]同理得Y坐標(biāo)： -[[(LVAR2.y- LVAR1.y)*2 ]]

為了不混淆，LVAR1還是跟之前的局部變量一樣，為商品中圖，LVAR2為鼠標(biāo)跟隨矩形。

全部設(shè)置完畢后，最后增加如果非任何一種情況，則隱藏矩形和動(dòng)態(tài)面板。

注意：條件添加選項(xiàng)框什么都不用填，直接確定即可。

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

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