本文主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)圖片放大鏡插件的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能幫助到大家。
前? 言
我們大家經(jīng)常逛各種電商類的網(wǎng)站，商品的細(xì)節(jié)就需要用到放大鏡，這個(gè)大家一定不陌生，今天我們就做一個(gè)圖片放大鏡的插件，來(lái)看看圖片是如何被放大的……
先看一下我們要是實(shí)現(xiàn)的最終效果是怎么樣的????
看完效果，大家有思路了嗎，沒(méi)有的話，我們一起來(lái)看一下是如何實(shí)現(xiàn)的~
1實(shí)現(xiàn)思路
① 要實(shí)現(xiàn)指上后放大的效果，需要做三個(gè)p，一個(gè)用來(lái)放原圖，另一個(gè)用來(lái)放放大效果的p，最后一個(gè)是鼠標(biāo)指上后需要放大部分的p（這個(gè)p我們用p標(biāo)簽來(lái)代替）。
② 確定放大比例，最重要的一點(diǎn)，鼠標(biāo)指上的p與放大效果的p，和原圖與放大圖的比例要相等。
③ 將鼠標(biāo)指上后的放大效果顯示出來(lái)。
2具體實(shí)現(xiàn)步驟
?首先，我們先來(lái)建三個(gè)p。
<p id="wrapper">
<!--小圖-->
<p id="img_min">
<!--圖片-->
<img src="img/11.png" alt="min">
<!--跟隨鼠標(biāo)的白塊-->
<p id="mousebg"></p>
</p>
<!--大圖-->
<p id="img_max">
<img id="img2_img" src="img/11.png" alt="max">
</p>
</p>我們HTML代碼部分已經(jīng)全部完成，接下來(lái)，我們用JS來(lái)實(shí)現(xiàn)功能：
給原圖添加三個(gè)事件，分別是，鼠標(biāo)進(jìn)入，鼠標(biāo)移動(dòng)，鼠標(biāo)移出。
當(dāng)鼠標(biāo)移入原圖時(shí)，鼠標(biāo)指上時(shí)的p和放大效果的p同時(shí)顯示。
img1.onmouseover = function () {
//鼠標(biāo)進(jìn)入
img2.style.display = 'block';
mousebg.style.display = 'block';
}鼠標(biāo)移出事件：
img1.onmouseout = function () {
//鼠標(biāo)離開
img2.style.display = 'none';
mousebg.style.display = 'none';
}重點(diǎn)是當(dāng)鼠標(biāo)移動(dòng)時(shí)，根據(jù)p標(biāo)簽與原圖的位置，來(lái)顯示大圖需要放大的部分。
var _event = event||window.event;//兼容性處理 var mouseX = _event.clientX - img1.offsetLeft; //計(jì)算鼠標(biāo)相對(duì)與小圖的位置 var mouseY = _event.clientY - img1.offsetTop;
在做位置分析時(shí)，需要考慮四種臨界情況：
就是當(dāng)鼠標(biāo)從圖片的上、下、左、右剛剛進(jìn)入時(shí)，并且這個(gè)距離小于鼠標(biāo)指上的p寬度的二分之一時(shí)，放大效果的p顯示出來(lái)，并不移動(dò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;
}最后，計(jì)算大圖的顯示范圍：
//計(jì)算大圖的顯示范圍 img2_img.style.left = -mul*mouseX+img2.offsetWidth/2+"px"; img2_img.style.top = -mul*mouseY+img2.offsetHeight/2+"px"; //使鼠標(biāo)在白塊的中間 mousebg.style.left = mouseX-mousebg.offsetWidth/2+"px"; mousebg.style.top = mouseY-mousebg.offsetHeight/2+"px";
這樣，我們用JS實(shí)現(xiàn)圖片放大鏡的插件就全部完成了。
相關(guān)推薦：
5款jquery實(shí)現(xiàn)的圖片放大鏡效果特效，商城網(wǎng)站必用！
用css實(shí)現(xiàn)圖片放大鏡效果實(shí)例詳解（圖）
以上是JS實(shí)現(xiàn)圖片放大鏡插件實(shí)例詳解的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！
熱AI工具
Undress AI Tool
免費(fèi)脫衣服圖片
Undresser.AI Undress
人工智能驅(qū)動(dòng)的應(yīng)用程序，用于創(chuàng)建逼真的裸體照片
AI Clothes Remover
用于從照片中去除衣服的在線人工智能工具。
Clothoff.io
AI脫衣機(jī)
Video Face Swap
使用我們完全免費(fèi)的人工智能換臉工具輕松在任何視頻中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費(fèi)的代碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
功能強(qiáng)大的PHP集成開發(fā)環(huán)境
Dreamweaver CS6
視覺(jué)化網(wǎng)頁(yè)開發(fā)工具
SublimeText3 Mac版
神級(jí)代碼編輯軟件(SublimeText3)
小紅書發(fā)布自動(dòng)保存圖片怎么解決？發(fā)布自動(dòng)保存圖片在哪里？
Mar 22, 2024 am 08:06 AM
隨著社交媒體的不斷發(fā)展，小紅書已經(jīng)成為越來(lái)越多年輕人分享生活、發(fā)現(xiàn)美好事物的平臺(tái)。許多用戶在發(fā)布圖片時(shí)遇到了自動(dòng)保存的問(wèn)題，這讓他們感到十分困擾。那么，如何解決這個(gè)問(wèn)題呢？一、小紅書發(fā)布自動(dòng)保存圖片怎么解決？1.清除緩存首先，我們可以嘗試清除小紅書的緩存數(shù)據(jù)。步驟如下：（1）打開小紅書，點(diǎn)擊右下角的“我的”按鈕；（2）在個(gè)人中心頁(yè)面，找到“設(shè)置”并點(diǎn)擊；（3）向下滾動(dòng)，找到“清除緩存”選項(xiàng)，點(diǎn)擊確認(rèn)。清除緩存后，重新進(jìn)入小紅書，嘗試發(fā)布圖片看是否解決了自動(dòng)保存的問(wèn)題。2.更新小紅書版本確保你的小
抖音評(píng)論里怎么發(fā)圖片？評(píng)論區(qū)圖片入口在哪里？
Mar 21, 2024 pm 09:12 PM
隨著抖音短視頻的火爆，用戶們?cè)谠u(píng)論區(qū)互動(dòng)變得更加豐富多彩。有些用戶希望在評(píng)論中分享圖片，以更好地表達(dá)自己的觀點(diǎn)或情感。那么，抖音評(píng)論里怎么發(fā)圖片呢？本文將為你詳細(xì)解答這個(gè)問(wèn)題，并為你提供一些相關(guān)的技巧和注意事項(xiàng)。一、抖音評(píng)論里怎么發(fā)圖片？1.打開抖音：首先，你需要打開抖音APP，并登錄你的賬號(hào)。2.找到評(píng)論區(qū)：在瀏覽或發(fā)布短視頻時(shí)，找到想要評(píng)論的地方，點(diǎn)擊“評(píng)論”按鈕。3.輸入評(píng)論內(nèi)容：在評(píng)論區(qū)輸入你的評(píng)論內(nèi)容。4.選擇發(fā)送圖片：在輸入評(píng)論內(nèi)容的界面，你會(huì)看到一個(gè)“圖片”按鈕或者“+”號(hào)按鈕，點(diǎn)
ppt怎么讓圖片一張一張出來(lái)
Mar 25, 2024 pm 04:00 PM
在PowerPoint中，讓圖片逐一顯示是一種常用的技巧，可以通過(guò)設(shè)置動(dòng)畫效果來(lái)實(shí)現(xiàn)。本指南詳細(xì)介紹了實(shí)現(xiàn)這一技巧的步驟，包括基本設(shè)置、圖片插入、添加動(dòng)畫、調(diào)整動(dòng)畫順序和時(shí)間。此外，還提供了高級(jí)設(shè)置和調(diào)整，例如使用觸發(fā)器、調(diào)整動(dòng)畫速度和順序，以及預(yù)覽動(dòng)畫效果。通過(guò)遵循這些步驟和技巧，用戶可以輕松地在PowerPoint中設(shè)置圖片逐一出現(xiàn)，從而提升演示文稿的視覺(jué)效果并吸引觀眾的注意力。
在 iPhone 上使圖片更清晰的 6 種方法
Mar 04, 2024 pm 06:25 PM
Apple最近的iPhone可以通過(guò)清晰的細(xì)節(jié)、飽和度和亮度來(lái)捕捉回憶。但有時(shí)，您可能會(huì)遇到一些問(wèn)題，這些問(wèn)題可能會(huì)導(dǎo)致圖像看起來(lái)不那么清晰。盡管iPhone相機(jī)上的自動(dòng)對(duì)焦已經(jīng)取得了長(zhǎng)足的進(jìn)步，可以讓您快速拍照，但相機(jī)在某些情況下可能會(huì)錯(cuò)誤地對(duì)焦錯(cuò)誤的拍攝對(duì)象，從而使照片在不需要的區(qū)域更加模糊。如果iPhone上的照片看起來(lái)失焦或總體上缺乏清晰度，以下帖子應(yīng)該可以幫助您使它們更清晰。如何在iPhone上使圖片更清晰[6種方法]您可以嘗試使用本機(jī)的“照片”應(yīng)用來(lái)清理照片。如果您需要更多功能和選項(xiàng)
福昕PDF閱讀器如何將pdf文檔轉(zhuǎn)成jpg圖片-福昕PDF閱讀器將pdf文檔轉(zhuǎn)成jpg圖片的方法
Mar 04, 2024 pm 05:49 PM
你們是不是也在使用福昕PDF閱讀器軟件呢?那么你們知道福昕PDF閱讀器如何將pdf文檔轉(zhuǎn)成jpg圖片嗎?下面這篇文章就為大伙帶來(lái)了福昕PDF閱讀器將pdf文檔轉(zhuǎn)成jpg圖片的方法，感興趣的小伙伴們快來(lái)下文看看吧。先啟動(dòng)福昕PDF閱讀器，接著在頂部工具欄找到“特色功能”，然后選擇“PDF轉(zhuǎn)其他”功能。在接下來(lái)，打開一個(gè)名為“福昕pdf在線轉(zhuǎn)換”的網(wǎng)頁(yè)。在頁(yè)面上方右側(cè)點(diǎn)擊“登錄”按鈕進(jìn)行登錄，然后打開“PDF轉(zhuǎn)圖片”功能。之后點(diǎn)擊上傳按鈕并將想要轉(zhuǎn)換成圖片的pdf文件添加進(jìn)來(lái)，添加完畢后點(diǎn)擊“開始轉(zhuǎn)
網(wǎng)頁(yè)圖片加載不出來(lái)怎么辦？6種解決辦法
Mar 15, 2024 am 10:30 AM
有網(wǎng)友發(fā)現(xiàn)打開瀏覽器網(wǎng)頁(yè)，網(wǎng)頁(yè)上的圖片遲遲加載不出來(lái)，是怎么回事？檢查過(guò)網(wǎng)絡(luò)是正常的，那是哪里出現(xiàn)了問(wèn)題呢？下面小編就給大家介紹一下網(wǎng)頁(yè)圖片加載不出來(lái)的六種解決方法?！ 【W(wǎng)頁(yè)圖片加載不出來(lái)： 1、網(wǎng)速問(wèn)題 網(wǎng)頁(yè)顯示不出圖片有可能是因?yàn)殡娔X的網(wǎng)速比較慢，電腦中開啟的軟件比較多， 而我們?cè)L問(wèn)的圖片比較大，這就可能因?yàn)榧虞d超時(shí)，導(dǎo)致圖片顯示不出來(lái)， 可以將比較占網(wǎng)速的軟件將關(guān)掉，可以去任務(wù)管理器查看一下?！ ?、訪問(wèn)人數(shù)過(guò)多 網(wǎng)頁(yè)顯示不出圖片還有可能是因?yàn)槲覀冊(cè)L問(wèn)的網(wǎng)頁(yè)，在同時(shí)間段訪問(wèn)的
wps文檔中兩張圖片怎么并排
Mar 20, 2024 pm 04:00 PM
在使用wps辦公軟件時(shí)，我們發(fā)現(xiàn)不單單只用一種形式，文字里會(huì)加入表格和圖片，表格里也可以加入圖片等等，這些都是兼并使用的，讓整個(gè)文檔的內(nèi)容看起來(lái)更豐富，如果需要在文檔中插入兩張圖片，而且需要并排排列。我們接下來(lái)的課程就可以解決這個(gè)問(wèn)題：wps文檔中兩張圖片怎么并排。1、首先需要打開WPS軟件，找到你想要調(diào)整的圖片。左鍵點(diǎn)擊圖片會(huì)彈出一個(gè)菜單欄，選擇“頁(yè)面布局”。2、在文字環(huán)繞中選擇“緊密型環(huán)繞”。3、當(dāng)需要的圖片都確認(rèn)設(shè)定為“緊密型文字環(huán)繞”之后，便可以把圖片隨意拖動(dòng)到合適的位置，點(diǎn)擊第一張圖片
如何讓W(xué)in11在啟動(dòng)時(shí)自動(dòng)顯示一張圖片
Dec 31, 2023 pm 10:54 PM
有一些用戶想要在不更改桌面壁紙的情況下，在開機(jī)時(shí)自動(dòng)打開一張圖片來(lái)看，我們可以使用這個(gè)功能欣賞圖片或是提示備忘錄等，其實(shí)設(shè)置方法非常簡(jiǎn)單，只要將圖片放到對(duì)應(yīng)的啟動(dòng)文件夾中就可以了，下面一起來(lái)看一下吧。win11開機(jī)怎么自動(dòng)打開一張圖片：1、首先我們需要雙擊打開桌面上“此電腦”2、進(jìn)入此電腦后，雙擊進(jìn)入系統(tǒng)“c盤”3、然后定位到如下位置“C:\Users\Administrator\AppData\Roaming\Microsoft\Windows\StartMenu\Programs\Start
