2021-04-03 分類: 網(wǎng)站建設(shè)
為了加深對動態(tài)面板的理解,所以嘗試了圖片放大鏡實現(xiàn)效果,中間也遇到一些小問題。該練習(xí)主要用到元件跟隨鼠標(biāo)移動、動態(tài)面板。
一、分析
實現(xiàn)效果:
倒推需要實現(xiàn)的功能:
放大鏡在圖片內(nèi)跟隨鼠標(biāo)移動;
鼠標(biāo)移動顯示該區(qū)域的放大圖片;
原圖片放大。
二、準(zhǔn)備
需要放大的圖片:小圖放大不清晰,所以直接選擇了清晰的大圖作為放大之后的圖片,等待放大的底圖在該圖片基礎(chǔ)上等比例縮小。案例圖片大?。骸?60×760】。
放大鏡:矩形元件,填充顏色,設(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è)置移動放大圖。
放大倍數(shù)為1,所以x的移動位置坐標(biāo)為‘0-(放大鏡動態(tài)面板.x)*2’;
如果頁面元素左上角坐標(biāo)為(0,0),則直接輸入表達式‘[[0-(lvar1.x)*2]]’;
為了方便之后復(fù)用,元素左上角坐標(biāo)不一定為(0,0),移動坐標(biāo)加上底圖坐標(biāo),即‘[[0-(lvar1.x)*2+(lvar2.x)*2]]’;
之后再用時只需要修改圖片,就不用重新設(shè)置移動的坐標(biāo)位置。
(3)整個案例到這里基本完成了,但是會發(fā)現(xiàn)鼠標(biāo)移出底圖時,放大鏡和放大圖依然能顯示,不符合邏輯,在事件中添加條件,如果鼠標(biāo)移動超出底圖區(qū)域,隱藏放大鏡和放大圖,否則顯示。
四、總結(jié)
案例不難,但是要注意每次選擇移動元件時,選擇面板還是圖片,還有移動的位置坐標(biāo)。
分享名稱:網(wǎng)站中關(guān)于圖片放大鏡
當(dāng)前網(wǎng)址:http://m.rwnh.cn/news/106379.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供ChatGPT、動態(tài)網(wǎng)站、域名注冊、品牌網(wǎng)站設(shè)計、網(wǎng)站建設(shè)、營銷型網(wǎng)站建設(shè)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容