javascript實現的放大效果程式碼

antzone發表於2017-03-15
JavaScript

放大鏡效果在很多網站都有應用，特別是產品網站 ，比如商城的產品展示效果，淘寶網就是一個典型的例子，淘寶網的放大鏡效果實現方法不得而知，實現此效果的方式有多種，下面就介紹其中的一種。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css"> 
#magnifier  
{ 
  width:230px; 
  height:346px; 
  position:relative; 
  margin:100px; 
} 
#magnifier .small_pic  
{ 
  width:230px; 
  height:346px; 
  position:relative; 
} 
#magnifier .small_pic img  
{ 
  float:left; 
  display:block; 
} 
#magnifier .float_layer  
{ 
  width:130px; 
  height:130px; 
  background:url(mytest/demo/zhezhao.png) repeat; 
  position:absolute; 
  top:0; 
  left:0; 
  display:none; 
} 
#magnifier .big_pic  
{ 
  width:400px; 
  height:400px; 
  position:absolute; 
  top:0px; 
  left:240px; 
  overflow:hidden; 
  display:none; 
  border:1px solid #e2e2e2; 
} 
#magnifier .big_pic img  
{ 
  position:absolute; 
  top:0; 
  left:0; 
} 
</style> 
<script type="text/javascript"> 
function getByClass(oParent,sClass) 
{ 
  var aEle=oParent.getElementsByTagName("*"); 
  var aResult=[]; 
  for(var i=0;i<aEle.length;i++) 
  { 
    if(aEle[i].className==sClass) 
    { 
      aResult.push(aEle[i]);
    } 
  } 
  return aResult; 
} 
window.onload=function () 
{ 
  var oMagnifier=document.getElementById("magnifier"); 
  var osmall_pic=getByClass(oMagnifier,'small_pic')[0]; 
  var oFloat=getByClass(oMagnifier,'float_layer')[0]; 
  var oBig=getByClass(oMagnifier,'big_pic')[0]; 
  var oImg=oBig.getElementsByTagName('img')[0]; 
  osmall_pic.onmouseover=function() 
  { 
    oFloat.style.display="block"; 
    oFloat.style.cursor="move"; 
    oBig.style.display="block"; 
  } 
 
  osmall_pic.onmouseout=function() 
  { 
    oFloat.style.display="none"; 
    oBig.style.display="none"; 
  } 
 
  osmall_pic.onmousemove=function(ev) 
  { 
    var oEvent=ev||event; 
    var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; 
    var l=oEvent.clientX-oMagnifier.offsetLeft-oFloat.offsetWidth/2; 
    var t=oEvent.clientY-oMagnifier.offsetTop-oFloat.offsetHeight/2; 
    if(l<=0) 
    { 
      l=0; 
    } 
    else if(l>osmall_pic.offsetWidth-oFloat.offsetWidth) 
    { 
      l=osmall_pic.offsetWidth-oFloat.offsetWidth; 
    } 
    if(t<=0) 
    { 
      t=0; 
    } 
    else if(t>osmall_pic.offsetHeight-oFloat.offsetHeight) 
    { 
      t=osmall_pic.offsetHeight-oFloat.offsetHeight; 
    } 
    oFloat.style.left=l+"px"; 
    oFloat.style.top=t+scrollTop+"px"; 
    var oPercentX=l/(osmall_pic.offsetWidth-oFloat.offsetWidth); 
    var oPercentY=t/(osmall_pic.offsetHeight-oFloat.offsetHeight); 
    oImg.style.left=-oPercentX*(oImg.offsetWidth-oBig.offsetWidth)+"px"; 
    oImg.style.top=-oPercentY*(oImg.offsetHeight-oBig.offsetHeight)+"px"; 
  } 
} 
</script> 
</head> 
<body> 
<div id="magnifier"> 
  <div class="small_pic"> 
    <span class="float_layer"></span>  
    <img src="mytest/demo/thesmall.jpg">   
  </div> 
  <div class="big_pic"><img src="mytest/demo/thebig.jpg" alt=""></div> 
</div> 
</body> 
</html>

相關文章