中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

1. 選中商品小圖，顯示對應的商品中圖（簡版不做說明）
2. 鼠標移動到商品中圖，鼠標跟隨框顯示并始終跟隨，移出商品中圖則隱藏
3. 鼠標移動到商品中圖，商品大圖顯示并移動到指定位置

一、元件布局

涉及的元件主要是圖片，商品圖片從網上下載高清大圖，用圖片處理軟件，將商品大圖設為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協議