欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!

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

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

一、CSS放大镜特效用处   -   TOP

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

二、CSS代码   -   TOP

  1. #divcss5 { width: 120px; height: 90px; padding: 5px;
     border: 1px solid #ccc; positionrelative; } 
  2. #divcss5 .small_pic { width: 120px; height: 90px; background: #eee;
     position: relative; } 
  3. #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; } 
  4. #divcss5 .mark {width:100%; height:100%; position:absolute; z-index:2;
     left:0px; top:0px; background:red; filter:alpha(opacity:0); opacity:0;} 
  5. #divcss5 .big_pic { position: absolute; top: -1px; left: 215px; 
    width:250px; height:250px; overflow:hidden; border:2px solid #CCC; display:none; } 
  6. #divcss5 .big_pic img { position:absolute; top: -30px; left: -80px; } 

三、JS代码   -   TOP

  1. function getByClass(oParent, sClass) 
  2.  var aEle=oParent.getElementsByTagName('*'); 
  3.  var aTmp=[]; 
  4.  var i=0
  5.   
  6.  for(i=0;i<aEle.length;i++) 
  7.  { 
  8.   if(aEle[i].className==sClass) 
  9.   { 
  10.    aTmp.push(aEle[i]); 
  11.   } 
  12.  } 
  13.   
  14.  return aTmp; 
  15.  
  16. window.onload=function () 
  17.  var oDiv=document.getElementById('divcss5'); 
  18.  var oMark=getByClass(oDiv, 'mark')[0]; 
  19.  var oFloat=getByClass(oDiv, 'float_layer')[0]; 
  20.  var oBig=getByClass(oDiv, 'big_pic')[0]; 
  21.  var oSmall=getByClass(oDiv, 'small_pic')[0]; 
  22.  var oImg=oBig.getElementsByTagName('img')[0]; 
  23.  oMark.onmouseover=function () 
  24.  { 
  25.   oFloat.style.display='block'
  26.   oBig.style.display='block'
  27.  }; 
  28.   
  29.  oMark.onmouseout=function () 
  30.  { 
  31.   oFloat.style.display='none'
  32.   oBig.style.display='none'
  33.  }; 
  34.   
  35.  oMark.onmousemove=function (ev) 
  36.  { 
  37.   var oEvent=ev||event; 
  38.    
  39.   var l=oEvent.clientX-oDiv.offsetLeft-oSmall.offsetLeft-oFloat.offsetWidth/2; 
  40.   var t=oEvent.clientY-oDiv.offsetTop-oSmall.offsetTop-oFloat.offsetHeight/2; 
  41.    
  42.   if(l<0
  43.   { 
  44.    l=0
  45.   } 
  46.   else if(l>oMark.offsetWidth-oFloat.offsetWidth) 
  47.   { 
  48.    l=oMark.offsetWidth-oFloat.offsetWidth; 
  49.   } 
  50.    
  51.   if(t<0
  52.   { 
  53.    t=0
  54.   } 
  55.   else if(t>oMark.offsetHeight-oFloat.offsetHeight) 
  56.   { 
  57.    t=oMark.offsetHeight-oFloat.offsetHeight; 
  58.   } 
  59.   oFloat.style.left=l+'px'; 
  60.   oFloat.style.top=t+'px'; 
  61.   var percentX=l/(oMark.offsetWidth-oFloat.offsetWidth); 
  62.   var percentY=t/(oMark.offsetHeight-oFloat.offsetHeight); 
  63.   oImg.style.left=-percentX*(oImg.offsetWidth-oBig.offsetWidth)+'px'; 
  64.   oImg.style.top=-percentY*(oImg.offsetHeight-oBig.offsetHeight)+'px'; 
  65.  }; 
  66. }; 

四、HTML代码片段   -   TOP

  1. <div id="divcss5"> 
  2. <div class="small_pic"> 
  3. <span class="mark"></span> 
  4.     <span class="float_layer"></span> 
  5.     <img src="zhanghanyun_s.jpg" width=120px height=90px /></div> 
  6.     <div class="big_pic"><img src="zhanghanyun.jpg" /></div> 
  7. </div> 

五、CSS特效在线演示   -   TOP

CSS DIV放大镜在线样式:http://www.divcss5.com/yanshi/2013021902/

六、打包下载源代码   -   TOP

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/css-texiao/texiao412.shtml