javascript淘寶主圖放大鏡功能

更新時(shí)間：2016年10月20日 08:41:40 作者：張飛翔

這篇文章主要為大家詳細(xì)介紹了javascript淘寶主圖放大鏡功能,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

工欲善其事，必先利其器。想要實(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"> 
  <!--跟隨鼠標(biāo)的白塊--> 
  <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部分

window.onload = function () { 
 var img1 = document.getElementById('img_min');//小圖盒子 
 var img2 = document.getElementById('img_max');//大圖盒子 
 var img2_img = document.getElementById('img2_img');//大圖圖片 
 var wrap = document.getElementById('wrapper'); 
 var mousebg = document.getElementById('mousebg');//鼠標(biāo)白塊 
 var mul = 5; 
 //當(dāng)某一個(gè)模塊dispaly:none的時(shí)候不能使用offsetWidth獲取它的寬高 
 img1.onmouseover = function () { 
  //鼠標(biāo)進(jìn)入 
  img2.style.display = 'block'; 
  mousebg.style.display = 'block'; 
   
 } 
 img1.onmouseout = function () { 
  //鼠標(biāo)離開(kāi) 
  img2.style.display = 'none'; 
  mousebg.style.display = 'none'; 
 } 
 img1.onmousemove = function (event) { 
  var _event = event||window.event;//兼容性處理 
  var mouseX = _event.clientX - wrap.offsetLeft - img1.offsetLeft; 
  //計(jì)算鼠標(biāo)相對(duì)與小圖的位置 
  var mouseY = _event.clientY - wrap.offsetTop - img1.offsetTop; 
 
  //特殊情況處理，分別靠近四條邊的時(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ì)算大圖的顯示范圍 
  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"; 
   
 } 
}

如果你看完代碼和注釋已經(jīng)理解了，用李云龍的一句話說(shuō)：“哎呀，你小子tnd還真是個(gè)天才”。那么下面的解析部分你快速的瀏覽完就OK了。

解析部分：

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)幫助理解。

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

您可能感興趣的文章: