简单轻巧的放大镜

在很多的电商网站上的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>
View Code

布局这里就不用多说啥，下面是如何实现放大镜的功能呢？请细看下面的核心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';

以上就是简单版放大镜的实现原理。

 

 

 

 

 posted on 2013-12-15 15:51  琦恒  阅读(336)  评论(0)  编辑  收藏  举报