求教.思路。思路。给最高分。

各位高手求教...思路。思路。。给最高分。。
昨天找了一个用javascript做的一个图片放大镜。看了半天也没看懂。求各位高手指点。。说说这个思路。真心请教。。谢谢。。

HTML代码；
<div class="middle">
<div id="div1"> 
<img src="images/zhangailing-1_e.jpg" /> 
<span></span> 
<div class="show"></div>
</div> 
<div id="div2"><img id="img1" src="images/zhangailing-1_e.jpg"/></div>

css代码：
#div1 { width:200px; height:200px; position:relative; border:1px solid; float:left;} 
#div1 img{width:200px; height:200px;} 
#div1 span { width:100px; height:100px; background:red; left:0px;top:0px; position:absolute; display:none; filter:alpha(opacity:20); opacity:0.2;} 
.show { width:100%; height:100%; background:red;position:absolute; z-index:10px; filter:alpha(opacity:10); opacity:0.1; left:0px; top:0px; } 
#div2 {width:300px; height:300px; position:relative; display:none; overflow:hidden;float:left;} 
#img1 { position:absolute;} 
#div3{float:left;width:300px;height:300px;background:#D4BFAA}
.middle{margin:0px auto;height:320px;width:72%;}

js代码：
window.onload=function () 
{ 
var oDiv=document.getElementById('div1'); 
var oShow=oDiv.getElementsByTagName('div')[0]; 
var oSpan=oDiv.getElementsByTagName('span')[0]; 
var oImg=document.getElementById('img1'); 
oShow.onmouseover=function() 
{ 
oSpan.style.display='block'; 
oImg.parentNode.style.display='block'; 
}; 
oShow.onmouseout=function() 
{ 
oSpan.style.display='none'; 
oImg.parentNode.style.display='none'; 
}; 
//关键代码如下；求教[color=#FF0000][/color]
oShow.onmousemove=function(ev) 
{ 
var oEvent=ev||event; 
var x=oEvent.clientX-oDiv.offsetLeft-oSpan.offsetWidth/2; 
var y=oEvent.clientY-oDiv.offsetTop-oSpan.offsetHeight/2; 

if(x<0) 
{ 
x=0; 
} else if(x>oShow.offsetWidth-oSpan.offsetWidth) { 
x=oShow.offsetWidth-oSpan.offsetWidth; 
} 
if(y<0) 
{ 
y=0; 
} else if(y>oShow.offsetHeight-oSpan.offsetHeight) 
{ 
y=oShow.offsetHeight-oSpan.offsetHeight 
} 
oSpan.style.left=x+'px'; 
oSpan.style.top=y+'px'; 
var percentX=x/(oShow.offsetWidth-oSpan.offsetWidth); 
var percentY=y/(oShow.offsetHeight-oSpan.offsetHeight); 
var oImgparent=oImg.parentNode; 
oImg.style.left=-percentX*(oImg.offsetWidth-oImgparent.offsetWidth)+'px'; 
oImg.style.top=-percentY*(oImg.offsetHeight-oImgparent.offsetHeight)+'px'; 
}; 
};

------解决方案--------------------
http://blog.csdn.net/sunxing007/article/details/4168547


楼主看看
------解决方案--------------------
这个比较简单易懂http://www.cnblogs.com/NNUF/archive/2012/04/07/2436339.html
------解决方案--------------------
var x=oEvent.clientX-oDiv.offsetLeft-oSpan.offsetWidth/2;
var y=oEvent.clientY-oDiv.offsetTop-oSpan.offsetHeight/2;
这边好像是获取放大后的图片展示时的坐标位置

具体的可以看看：http://www.cftea.com/c/2006/12/PCTKER6T0V62S854.asp


至于以下的代码貌似是在判断如果横坐标的位置小于右边可以显示图片时执行的代码，具体你可以调试下一步一步看看。