當(dāng)前位置：首頁(yè) > 前端技术 > javascript >内容正文

javascript

javascript淘宝主图放大镜功能

發(fā)布時(shí)間：2024/4/14 javascript 34 豆豆

生活随笔收集整理的這篇文章主要介紹了 javascript淘宝主图放大镜功能小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

2019獨(dú)角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>

工欲善其事，必先利其器。想要實(shí)現(xiàn)某一種效果，我們必須要先了解其中的原理。

放大鏡的功能就是通過(guò)獲取鼠標(biāo)在小圖中的位置，然后根據(jù)大小圖的尺寸比例換算出大圖需要顯示的部分，然后使用定位讓大圖要顯示的部分出現(xiàn)在右邊的邊框內(nèi)。

然后看代碼，根據(jù)代碼看講解會(huì)更容易理解。

html部分

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>放大鏡效果</title><link rel="stylesheet" href="magnifier.css"> </head> <body><div id="wrapper"><div id="img_min"><img src="test.jpg" alt="min"><p id="mousebg"></p></div><div id="img_max"><img id="img2_img" src="test.jpg" alt="max"></div></div><script type="text/javascript" src="magnifier.js"></script> </body> </html>

css部分

*{margin: 0;padding: 0; } div{position: relative; } div>div{width: 300px;height: 300px;float: left;margin: 100px;overflow: hidden; } #img_min>img{/*display: block;*/width: 300px; } #img_max{display: none;} #img_max>img{position: absolute;top: 0;left: 0;display: block;width: 1500px; } #mousebg{display: none;position: absolute;width: 60px;height: 60px;background-color: rgba(255,255,255,.7);top: 0;left: 0; }

最重要的javascript部分

解析部分：

html和css部分都是簡(jiǎn)單的布局代碼，不再講解，js部分代碼也比較簡(jiǎn)單，我們直接講解鼠標(biāo)移動(dòng)事件部分的代碼。

首先用一張圖來(lái)解釋一下獲取鼠標(biāo)相對(duì)與小圖位置的原理

可以看到通過(guò)代碼中的運(yùn)算，我們所獲取的值就是鼠標(biāo)相對(duì)于img1左上角的值。

理解了這一步之后，其實(shí)可以說(shuō)我們的工作已經(jīng)完成了一半了。

然后，我們先跳過(guò)特殊情況的處理，直接進(jìn)行右邊圖片定位的基本運(yùn)算。

因?yàn)橛杏玫給ffsetWidth、offsetHeight、style.width、style.height屬性，其中style.width、style.height和offsetWidth、offsetHeight的范圍是相同的，其他不同我會(huì)在另一篇博客中詳細(xì)描述。我們先用一張圖了解下這幾個(gè)屬性，同時(shí)和上面的幾個(gè)屬性進(jìn)行對(duì)比（圖片來(lái)自互聯(lián)網(wǎng)，侵刪）

然后我們講解代碼

右邊大圖框中的圖片使用style.left定位在大圖框中的位置，負(fù)號(hào)是因?yàn)槲覀兪髽?biāo)的運(yùn)動(dòng)方向剛好是和我們大圖框中的圖片運(yùn)動(dòng)的方向相反，mul則是根據(jù)大圖和小圖的尺寸計(jì)算出來(lái)的比例，-mul*mouseX計(jì)算出來(lái)的其實(shí)就是圖片在大圖框中的相對(duì)位置，但是此時(shí)你會(huì)發(fā)現(xiàn)你鼠標(biāo)所在的位置在右邊是在圖框的左上角的，所以我們要加上一個(gè) img2.offsetWidth/2 來(lái)讓圖片居中顯示。同樣我們?cè)诳v坐標(biāo)進(jìn)行相同的處理就好了。

//計(jì)算大圖的顯示范圍img2_img.style.left = -mul*mouseX+img2.offsetWidth/2+"px";img2_img.style.top = -mul*mouseY+img2.offsetHeight/2+"px";

下面我們就要進(jìn)行特殊情況的處理了，做到上一步的時(shí)候你會(huì)發(fā)現(xiàn)，在鼠標(biāo)移動(dòng)到邊緣的時(shí)候，鼠標(biāo)那個(gè)小白塊有時(shí)候會(huì)跑出圖片的范圍，所以我們就要進(jìn)行處理將它限制在圖片的范圍內(nèi)，因?yàn)槭髽?biāo)是在白色透明塊的中間，所以我們就是將鼠標(biāo)限制在距離圖片邊框上下左右二分之一白塊長(zhǎng)/寬的位置即可。

//特殊情況處理，分別靠近四條邊的時(shí)候if(mouseX<mousebg.offsetWidth/2){mouseX = mousebg.offsetWidth/2;}if(mouseX>img1.offsetWidth-mousebg.offsetWidth/2){mouseX = img1.offsetWidth-mousebg.offsetWidth/2;}if(mouseY<mousebg.offsetHeight/2){mouseY = mousebg.offsetHeight/2;}if(mouseY>img1.offsetHeight-mousebg.offsetHeight/2){mouseY = img1.offsetHeight-mousebg.offsetHeight/2;}

當(dāng)距離左邊小于二分之一寬的時(shí)候，我們就讓mouseX等于二分之一寬，這樣白塊就不會(huì)繼續(xù)移動(dòng)，其他三個(gè)方向同理。

做完這一步，我們的效果也就全部完成了。

ps:抽象的地方可以通過(guò)畫(huà)圖來(lái)幫助理解

轉(zhuǎn)載于:https://my.oschina.net/u/2966158/blog/760536

總結(jié)

以上是生活随笔為你收集整理的javascript淘宝主图放大镜功能的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： linux源代码安装程序
下一篇：【极品手机推荐】安卓3G运存16G内存，