CSS图片放大镜特效

一、CSS放大镜特效用处

我们看到淘宝店铺产品页面对产品截图鼠标移上选择小区域后对应右侧显示此区域放大图。实际是两张图片，一张小图、一张大图，鼠标移到小图上显示大图对应局部。

二、CSS代码

#divcss5 { width: 120px; height: 90px; padding: 5px;
 border: 1px solid #ccc; position: relative; } 
#divcss5 .small_pic { width: 120px; height: 90px; background: #eee;
 position: relative; } 
#divcss5 .float_layer { width: 50px; height: 50px; border: 1px solid #000;
 background: #fff; filter: alpha(opacity: 30); opacity: 0.3;
 position: absolute; top: 0; left: 0; display:none; } 
#divcss5 .mark {width:100%; height:100%; position:absolute; z-index:2;
 left:0px; top:0px; background:red; filter:alpha(opacity:0); opacity:0;} 
#divcss5 .big_pic { position: absolute; top: -1px; left: 215px; 
width:250px; height:250px; overflow:hidden; border:2px solid #CCC; display:none; } 
#divcss5 .big_pic img { position:absolute; top: -30px; left: -80px; } 

三、JS代码

function getByClass(oParent, sClass) 
{ 
 var aEle=oParent.getElementsByTagName('*'); 
 var aTmp=[]; 
 var i=0; 
  
 for(i=0;i<aEle.length;i++) 
 { 
  if(aEle[i].className==sClass) 
  { 
   aTmp.push(aEle[i]); 
  } 
 } 
  
 return aTmp; 
} 
 
window.onload=function () 
{ 
 var oDiv=document.getElementById('divcss5'); 
 var oMark=getByClass(oDiv, 'mark')[0]; 
 var oFloat=getByClass(oDiv, 'float_layer')[0]; 
 var oBig=getByClass(oDiv, 'big_pic')[0]; 
 var oSmall=getByClass(oDiv, 'small_pic')[0]; 
 var oImg=oBig.getElementsByTagName('img')[0]; 
 oMark.onmouseover=function () 
 { 
  oFloat.style.display='block'; 
  oBig.style.display='block'; 
 }; 
  
 oMark.onmouseout=function () 
 { 
  oFloat.style.display='none'; 
  oBig.style.display='none'; 
 }; 
  
 oMark.onmousemove=function (ev) 
 { 
  var oEvent=ev||event; 
   
  var l=oEvent.clientX-oDiv.offsetLeft-oSmall.offsetLeft-oFloat.offsetWidth/2; 
  var t=oEvent.clientY-oDiv.offsetTop-oSmall.offsetTop-oFloat.offsetHeight/2; 
   
  if(l<0) 
  { 
   l=0; 
  } 
  else if(l>oMark.offsetWidth-oFloat.offsetWidth) 
  { 
   l=oMark.offsetWidth-oFloat.offsetWidth; 
  } 
   
  if(t<0) 
  { 
   t=0; 
  } 
  else if(t>oMark.offsetHeight-oFloat.offsetHeight) 
  { 
   t=oMark.offsetHeight-oFloat.offsetHeight; 
  } 
  oFloat.style.left=l+'px'; 
  oFloat.style.top=t+'px'; 
  var percentX=l/(oMark.offsetWidth-oFloat.offsetWidth); 
  var percentY=t/(oMark.offsetHeight-oFloat.offsetHeight); 
  oImg.style.left=-percentX*(oImg.offsetWidth-oBig.offsetWidth)+'px'; 
  oImg.style.top=-percentY*(oImg.offsetHeight-oBig.offsetHeight)+'px'; 
 }; 
}; 

四、HTML代码片段

<div id="divcss5"> 
<div class="small_pic"> 
<span class="mark"></span> 
    <span class="float_layer"></span> 
    <img src="https://www.mbkfw.com/static/image/lazy.gif" class="lazy" original="zhanghanyun_s.jpg" width=120px height=90px /></div> 
    <div class="big_pic"><img src="https://www.mbkfw.com/static/image/lazy.gif" class="lazy" original="zhanghanyun.jpg" /></div> 
</div>