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

本文是關(guān)于電商網(wǎng)站圖片放大鏡的實現(xiàn)效果，一起來文中看看~

為了加深對動態(tài)面板的理解，所以嘗試了圖片放大鏡實現(xiàn)效果，中間也遇到一些小問題。該練習(xí)主要用到元件跟隨鼠標(biāo)移動、動態(tài)面板。

原型預(yù)覽：https://r2cf4u.axshare.com

一、分析

實現(xiàn)效果：

倒推需要實現(xiàn)的功能：

1. 放大鏡在圖片內(nèi)跟隨鼠標(biāo)移動；
2. 鼠標(biāo)移動顯示該區(qū)域的放大圖片；
3. 原圖片放大。

二、準(zhǔn)備

1. 需要放大的圖片：小圖放大不清晰，所以直接選擇了清晰的大圖作為放大之后的圖片，等待放大的底圖在該圖片基礎(chǔ)上等比例縮小。案例圖片大小：【760×760】。
2. 放大鏡：矩形元件，填充顏色，設(shè)置不透明度，然后轉(zhuǎn)換為圖片。

說明：底圖和需要放大的圖片大小根據(jù)自己需要放大的倍數(shù)等比例縮放，放大鏡的大小至少為底圖大小的一半，案例放大倍數(shù)1倍，放大的圖片【760×760】，底圖【380×380】，放大鏡【190×190】。

三、交互

思路：鼠標(biāo)移入底圖顯示放大鏡，設(shè)置放大鏡跟隨鼠標(biāo)移動，然后顯示被放大后的圖片。

（1）放大圖和放大鏡分別轉(zhuǎn)換為動態(tài)面板，命名與元件名相同，然后隱藏，放大圖轉(zhuǎn)換為動態(tài)面板后更改大小為【380×380】。

（2）頁面添加【頁面鼠標(biāo)移動】事件，顯示放大鏡動態(tài)面板，設(shè)置放大鏡的中心點跟隨鼠標(biāo)移動（放大鏡寬高的一半，分別減去坐標(biāo)xy），所以插入變量時，設(shè)置為：[[Cursor.x-95]]。

注意：放大鏡移動選擇絕對距離。

預(yù)覽之后會發(fā)現(xiàn)，放大鏡可以移出底圖邊界，需要設(shè)置不能移出邊界，在移動放大鏡時添加邊界，用到元件函數(shù)的top、left、right、bottom函數(shù)。

接下來實現(xiàn)圖片被放大的效果，顯示放大圖動態(tài)面板，設(shè)置移動放大圖。

1. 放大倍數(shù)為1，所以x的移動位置坐標(biāo)為‘0-（放大鏡動態(tài)面板.x）*2’；
2. 如果頁面元素左上角坐標(biāo)為（0，0），則直接輸入表達(dá)式‘[[0-(LVAR1.x)*2]]’；
3. 為了方便之后復(fù)用，元素左上角坐標(biāo)不一定為（0，0），移動坐標(biāo)加上底圖坐標(biāo)，即‘[[0-(LVAR1.x)*2+(LVAR2.x)*2]]’；
4. 之后再用時只需要修改圖片，就不用重新設(shè)置移動的坐標(biāo)位置。

（3）整個案例到這里基本完成了，但是會發(fā)現(xiàn)鼠標(biāo)移出底圖時，放大鏡和放大圖依然能顯示，不符合邏輯，在事件中添加條件，如果鼠標(biāo)移動超出底圖區(qū)域，隱藏放大鏡和放大圖，否則顯示。

四、總結(jié)

案例不難，但是要注意每次選擇移動元件時，選擇面板還是圖片，還有移動的位置坐標(biāo)。

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

題圖來自 Pexels，基于 CC0 協(xié)議