欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > CSS特效 >

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

我要分享到:

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2013-02-19 23:09 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。