CSS图片放大镜特效

DIV+CSS版图片放大镜特效图文演示及HTML源代码下载

用于产品图片放大镜特效截图

一、CSS放大镜特效用处

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

二、CSS代码

#HTML8 { width: 120px; height: 90px; padding: 5px;
 border: 1px solid #ccc; position: relative; } 
#HTML8 .small_pic { width: 120px; height: 90px; background: #eee;
 position: relative; } 
#HTML8 .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; } 
#HTML8 .mark {width:100%; height:100%; position:absolute; z-index:2;
 left:0px; top:0px; background:red; filter:alpha(opacity:0); opacity:0;} 
#HTML8 .big_pic { position: absolute; top: -1px; left: 215px; 
width:250px; height:250px; overflow:hidden; border:2px solid #CCC; display:none; } 
#HTML8 .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('HTML8'); 
 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="HTML8"> 
<div class="small_pic"> 
<span class="mark"></span> 
    <span class="float_layer"></span> 
    <img src="zhanghanyun_s.jpg" width=120px height=90px /></div> 
    <div class="big_pic"><img src="zhanghanyun.jpg" /></div> 
</div> 

五、CSS特效在线演示

CSS DIV放大镜在线样式：//www.html8.com.cn/yanshi/2013021902/

六、打包下载源代码