类似放大镜在图片当中缩放局部位置

Question

类似放大镜在图片当中缩放局部位置

荆棘鸟

39863351

我已经会那种类似京东淘宝宝贝详情页主图的缩放。
但是现在我想在图片当中进行局部的缩放，初学js。求思路，low一点没关系。

我的代码如下

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>放大镜</title>
<style>
*{ margin:0; padding:0}
#div1 {position:relative;width:200px; height:275px;cursor:move;overflow:hidden;top:100px; left:100px}
#div1 img{ width:100%; height:100%;}
#div1 span {width:100px; height:100px; background:yellow; position:absolute;left:0px; top:0px; filter:alpha(opacity:30); opacity:0.3; border:1px solid black; display:none;}
#div2 {width:300px; height:300px;overflow:hidden; position:absolute; top:100px; left:330px; display:none}
#bigImg {position:absolute;}
/*.shadow {width:100%; height:100%; background:red; position:absolute; top:0px; left:0px; z-index:10; filter:alpha(opacity:0); opacity:.5;}
*/
</style>

<script type="text/javascript">
window.onload=function (){
    var oDiv1=document.getElementById('div1');
    var oDiv2=document.getElementById('div2');
    var bigImg=document.getElementById('bigImg');
    var aInput=document.getElementsByTagName('input');
    var oSpan=oDiv1.getElementsByTagName('span')[0];
    
    
    oDiv1.onmousemove=function(ev){
        oSpan.style.display=oDiv2.style.display='block';
        
        var oEv=ev||event;
        
        //获取滚动条  chrome不识别 documentElement.scrollTop
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        
        //鼠标在span的中心位置
        var l=oEv.clientX-oDiv1.offsetLeft-oSpan.offsetWidth/2; 
        var t=oEv.clientY+scrollTop-oDiv1.offsetTop-oSpan.offsetHeight/2;
        
        
        //限制范围 
        if(l<0)l=0;
        if(l>=oDiv1.offsetWidth-oSpan.offsetWidth){
            l=oDiv1.offsetWidth-oSpan.offsetWidth;
        }

        if(t<0)t=0;
        if(t>=oDiv1.offsetHeight-oSpan.offsetHeight){
            t=oDiv1.offsetHeight-oSpan.offsetHeight;
        }
        oSpan.style.left=l+'px';
        oSpan.style.top=t+'px';    
        
        
        var l_rate=l / (oDiv1.offsetWidth-oSpan.offsetWidth);
        var t_rate=t / (oDiv1.offsetHeight-oSpan.offsetHeight);
        
        
        bigImg.style.left= (oDiv2.offsetWidth-bigImg.offsetWidth)*l_rate +'px'; //外box 减 内部大图片，为负值
        bigImg.style.top= (oDiv2.offsetHeight-bigImg.offsetHeight)*t_rate +'px';
        
        
        //第二种算法
        /*var rateW=oDiv2.offsetWidth/oSpan.offsetWidth;
        var rateH=oDiv2.offsetHeight+2/oSpan.offsetHeight;
            
        bigImg.style.left=-rateW*l+'px';
        bigImg.style.top=-rateH*t+'px'*/
        
    };
    
    oDiv1.onmouseout=function(){
        oSpan.style.display=oDiv2.style.display='none';    
    };
    
};


</script>
</head>

<body>
<div id="div1">
    <img src="images/1.jpg" />
    <span></span>
</div>
<div id="div2">
    <img id="bigImg" src="images/1.jpg" />
</div>


</body>
</html>

这段代码的效果如下图图片描述