網(wǎng)站中關(guān)于圖片放大鏡

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

一、分析

實(shí)現(xiàn)效果：

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

放大鏡在圖片內(nèi)跟隨鼠標(biāo)移動(dòng)；

鼠標(biāo)移動(dòng)顯示該區(qū)域的放大圖片；

原圖片放大。

二、準(zhǔn)備

需要放大的圖片：小圖放大不清晰，所以直接選擇了清晰的大圖作為放大之后的圖片，等待放大的底圖在該圖片基礎(chǔ)上等比例縮小。案例圖片大?。骸?60×760】。

放大鏡：矩形元件，填充顏色，設(shè)置不透明度，然后轉(zhuǎn)換為圖片。

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

三、交互

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

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

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

注意：放大鏡移動(dòng)選擇絕對(duì)距離。

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

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

放大倍數(shù)為1，所以x的移動(dòng)位置坐標(biāo)為‘0-（放大鏡動(dòng)態(tài)面板.x）*2’；

如果頁面元素左上角坐標(biāo)為（0，0），則直接輸入表達(dá)式‘[[0-(lvar1.x)*2]]’；

為了方便之后復(fù)用，元素左上角坐標(biāo)不一定為（0，0），移動(dòng)坐標(biāo)加上底圖坐標(biāo)，即‘[[0-(lvar1.x)*2+(lvar2.x)*2]]’；

之后再用時(shí)只需要修改圖片，就不用重新設(shè)置移動(dòng)的坐標(biāo)位置。

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

四、總結(jié)

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

當(dāng)前名稱：網(wǎng)站中關(guān)于圖片放大鏡
鏈接分享：http://www.bm7419.com/news29/106379.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號(hào)、網(wǎng)站導(dǎo)航、網(wǎng)站收錄、建站公司、用戶體驗(yàn)、手機(jī)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)