javascript实现的放大效果代码

放大镜效果在很多网站都有应用，特别是产品网站 ，比如商城的产品展示效果，淘宝网就是一个典型的例子，淘宝网的放大镜效果实现方法不得而知，实现此效果的方式有多种，下面就介绍其中的一种。

代码实例如下:

[ 其他 ] 运行代码下载代码

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.51qianduan.com/" /> 
<title>51前端</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>

代码描述：javascript 放大效果。javascript实现的放大效果代码

下载全部收藏

154 205

用户评论

大牛，别默默的看了，快登录帮我点评一下吧！:) 登录 | 注册