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

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

一、分析

實現(xiàn)效果：

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

放大鏡在圖片內(nèi)跟隨鼠標移動；

鼠標移動顯示該區(qū)域的放大圖片；

原圖片放大。

二、準備

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

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

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

三、交互

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

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

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

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

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

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

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

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

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

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

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

四、總結(jié)

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

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

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號、網(wǎng)站導(dǎo)航、網(wǎng)站收錄、建站公司、用戶體驗、手機網(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)