優(yōu)化原因

目前創(chuàng)新互聯(lián)已為1000+的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)絡(luò)空間、網(wǎng)站托管、服務(wù)器租用、企業(yè)網(wǎng)站設(shè)計(jì)、孟村網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

現(xiàn)在的電商商城項(xiàng)目解決的主要是購買商品的問題，那么購買商品主要要看清楚商品表面外形的主要特征和細(xì)節(jié)，如果圖片處理過小，或者細(xì)節(jié)過于模糊，就需要做一個商品高清圖片放大局部的功能。

技術(shù)關(guān)鍵點(diǎn)

1.左側(cè)和上側(cè)距離，在一個水平位置和垂直位置中有我們可以挪動的區(qū)域，就是原圖片區(qū)域，鼠標(biāo)挪動位置是一個塊狀位置，他的左側(cè)和上側(cè)距離瀏覽器上側(cè)和左側(cè)分別有一個長度，我們叫它們 ClientX 和 ClientY，而左上側(cè)鼠標(biāo)沒有略過的位置實(shí)際上是一個點(diǎn)，我們拖動放大塊時，它會由一個點(diǎn)變成一個方塊，這個放大鏡左上邊的點(diǎn)所控制的這一點(diǎn)距離屏幕上側(cè)和左側(cè)的 ClientY 和 ClientX 會隨著鼠標(biāo)的移動而變大變小，那么要計(jì)算放大塊左側(cè)距離原點(diǎn)和上側(cè)原點(diǎn)就要減去原圖距離屏幕的上邊高度和左邊高度。在一個水平位置和垂直位置中有我們可以挪動的區(qū)域，就是原圖片區(qū)域，鼠標(biāo)挪動位置是一個塊狀位置，他的左側(cè)和上側(cè)距離瀏覽器上側(cè)和左側(cè)分別有一個長度，我們叫它們 ClientX 和 ClientY，而左上側(cè)鼠標(biāo)沒有略過的位置實(shí)際上是一個點(diǎn)，我們拖動放大塊時，它會由一個點(diǎn)變成一個方塊，這個放大鏡左上邊的點(diǎn)所控制的這一點(diǎn)距離屏幕上側(cè)和左側(cè)的 ClientY 和 ClientX 會隨著鼠標(biāo)的移動而變大變小，那么要計(jì)算放大塊左側(cè)距離原點(diǎn)和上側(cè)原點(diǎn)就要減去原圖距離屏幕的上邊高度和左邊高度。

計(jì)算方式

x = 事件對象.clientX - 外側(cè)盒子.offsetLeft;
Y = 事件對象.clientY - 外側(cè)盒子.offsetTop;

2.解決如何鼠標(biāo)在黃塊內(nèi)居中的問題，橫縱位移分別加上放大黃塊一半的長度和寬度。

計(jì)算方式

x = 事件對象.clientX - 外側(cè)盒子.offsetLeft - 小黃.offsetWidth/2;
Y = 事件對象.clientY - 外側(cè)盒子.offsetTop - 小黃.offsetHeight/2;
// 事件對象的 offsetX 和 offsetY
// 歸屬于事件對象
// 作用：關(guān)注的鼠標(biāo)的坐標(biāo)（鼠標(biāo)相對于當(dāng)前元素的坐標(biāo)）
// 元素的 offsetLeft 和 offsetTop
// 歸屬于元素
// 作用：關(guān)注的元素的坐標(biāo)（相對于offsetParent的坐標(biāo)）

3. 小黃塊的大距離

4.用preventDefault阻止事件冒泡

簡易實(shí)現(xiàn)代碼

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

文章標(biāo)題：javascript實(shí)現(xiàn)商品圖片放大鏡-創(chuàng)新互聯(lián)
網(wǎng)站路徑：http://weahome.cn/article/cssoos.html