真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

重慶分公司 重慶分公司

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營(yíng)銷
• 小程序
• 新聞動(dòng)態(tài)
• 成功案例
• 關(guān)于我們
028-86922220

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營(yíng)銷
• 小程序
• 新聞動(dòng)態(tài)
• 成功案例
• 關(guān)于我們

我們HTML代碼部分已經(jīng)全部完成，接下來，我們用JS來實(shí)現(xiàn)功能：

給原圖添加三個(gè)事件，分別是，鼠標(biāo)進(jìn)入，鼠標(biāo)移動(dòng)，鼠標(biāo)移出。

當(dāng)鼠標(biāo)移入原圖時(shí)，鼠標(biāo)指上時(shí)的div和放大效果的div同時(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)簽與原圖的位置，來顯示大圖需要放大的部分。

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)指上的div寬度的二分之一時(shí)，放大效果的div顯示出來，并不移動(dòng)。

//特殊情況處理，分別靠近四條邊的時(shí)候 
 if(mouseXimg1.offsetWidth-mousebg.offsetWidth/2){ 
  mouseX = img1.offsetWidth-mousebg.offsetWidth/2; 
   } 
 if(mouseYimg1.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";

關(guān)于“JS如何實(shí)現(xiàn)圖片放大鏡插件”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

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