在很多的电商网站上的item页一般都会有放大镜的功能。今天就带大家一起实现个简单版的放大镜。
首页我们来来看下页面布局：
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title> 放大镜 </title> <style type="text/css"> #div1 { width: 200px; height: 200px; padding: 5px; border: 1px solid #ccc; position: relative; } #div1 .small_pic { width: 200px; height: 200px; background: #eee; position: relative; } #div1 .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; } #div1 .mark {width:100%; height:100%; position:absolute; z-index:2; left:0px; top:0px; background:red; filter:alpha(opacity:0); opacity:0;} #div1 .big_pic { position: absolute; top: -1px; left: 215px; width:250px; height:250px; overflow:hidden; border:2px solid #CCC; display:none; } #div1 .big_pic img { position:absolute; top: -30px; left: -80px; } </style> </head> <body> <div id="div1"> <div class="small_pic"> <span class="mark"></span> <span class="float_layer"></span> <img width="200" height="200" src="http://img2.hqbcdn.com/activity/93/bc/93bca80c2e76b207e451ae5d40af351b.jpg" alt="放大镜图片" longdesc="http://www.okhqb.com" /> </div> <div class="big_pic"> <img width="450" height="450" src="http://resource.okhqb.com/thumbs/product/b6/66/b6667789322a6805a7b8e94b523a86e1.340.jpg" alt="放大镜图片二" longdesc="http://www.okhqb.com" /> </div> </div> </body> </html>
布局这里就不用多说啥，下面是如何实现放大镜的功能呢？请细看下面的核心js代码：
<script type="text/javascript"> 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('div1'); 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'; }; }; </script>
在这个功能点上，主要注意的地方就是控制小遮罩层的位置，和大图的显示位置。
遮罩层正方形的的位置js控制：
var l=oEvent.clientX-oDiv.offsetLeft-oSmall.offsetLeft-oFloat.offsetWidth/2; var t=oEvent.clientY-oDiv.offsetTop-oSmall.offsetTop-oFloat.offsetHeight/2;
然后根据元素的临界点控制划动的区域限制。
大图的显示位置js控制：
oImg.style.left=-percentX*(oImg.offsetWidth-oBig.offsetWidth)+'px';
oImg.style.top=-percentY*(oImg.offsetHeight-oBig.offsetHeight)+'px';
以上就是简单版放大镜的实现原理。