JS實(shí)現(xiàn)圖片放大鏡插件詳解

更新時(shí)間：2017年11月06日 08:37:58 作者：一個(gè)檸檬

這篇文章主要為大家詳細(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è)div，一個(gè)用來(lái)放原圖，另一個(gè)用來(lái)放放大效果的div，最后一個(gè)是鼠標(biāo)指上后需要放大部分的div（這個(gè)div我們用p標(biāo)簽來(lái)代替）。

② 確定放大比例，最重要的一點(diǎn)，鼠標(biāo)指上的div與放大效果的div，和原圖與放大圖的比例要相等。

③ 將鼠標(biāo)指上后的放大效果顯示出來(lái)。

2具體實(shí)現(xiàn)步驟

首先，我們先來(lái)建三個(gè)div。

<div id="wrapper"> 
     <!--小圖-->
    <div id="img_min"> 
       <!--圖片-->
       <img src="img/11.png" alt="min"> 
       <!--跟隨鼠標(biāo)的白塊-->
       <p id="mousebg"></p> 
     </div> 
   <!--大圖-->
     <div id="img_max">
       <img id="img2_img" src="img/11.png" alt="max">
     </div> 
   </div>

我們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í)的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)離開(kāi) 
       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)指上的div寬度的二分之一時(shí)，放大效果的div顯示出來(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)圖片放大鏡的插件就全部完成了。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: