这是一个Javascript实现放大镜效果的工程，求大神讲解一下？
程序代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jscsnd 项目</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
.wrap{
width: 600px;
height: 360px;
margin:100px;
}
#small,#big{
width: 298px;
height: 358px;
border:1px solid #ccc;
float:left;
}
#small{
text-align:center;
position: relative;
}
#small img{
width: 285px;
height:346px;
margin-top:6px;
}
#move{
width: 150px;
height: 150px;
/*background:rgba(255,255,255,.5);*/
background:#fff;
opacity:.5;
filter:alpha(opacity=50);
position: absolute;
top: 0;
left: 0;
cursor:move;
display:none;
}
#big{
position:relative;
overflow:hidden;
display:block;
}
#big img{
position:absolute;
top:0;
left:0;
}
</style>
</head>
<body style="height: 2000px;">
<div class="wrap" id="wrap">
<div id="small">
<img src="./display.jpg" alt="">
<div id="move"></div>
</div>
<div id="big">
<img src="./display.jpg" alt="">
</div>
</div>
<script type="text/javascript">
//1.
var oWrap = document.getElementById('wrap');
var smallDiv = document.getElementById('small');
var move = document.getElementById('move');
var bigDiv = document.getElementById('big');
//2.
smallDiv.onmousemove = function (ev) {
var oEvent = ev || event;//获取坐标
var iScrollTop = document.documentElement.scrollTop || document.body.scrollTop;//滚动条移动到顶部的距离
var iScrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
//oEvent.clientX是从中间的点到x边界的距离
var disX = oEvent.clientX + iScrollLeft - move.offsetWidth / 2 - oWrap.offsetLeft;
var disY = oEvent.clientY + iScrollTop - move.offsetHeight / 2 - oWrap.offsetTop;
// console.log(oWrap.offsetLeft)
if (disX < 0) {
disX = 0;
} else if (disX > smallDiv.offsetWidth - move.offsetWidth) {
disX = smallDiv.offsetWidth - move.offsetWidth;
};
if (disY < 0) {
disY = 0;
} else if (disY > smallDiv.offsetHeight - move.offsetHeight) {
disY = smallDiv.offsetHeight - move.offsetHeight;
};
move.style.left = disX + 'px';
move.style.top = disY + 'px';
/*算出move块在X轴的移动距离与总的移动距离的比例*/
var _pageX = disX / (smallDiv.offsetWidth - move.offsetWidth);
console.log(_pageX) /*这是一个0~1之间的数*/
/*算出move块在Y轴的移动距离与总的移动距离的比例*/
var _pageY = disY / (smallDiv.offsetHeight - move.offsetHeight);
/*求出大图片在X轴的移动距离*/
var mX = _pageX * (bigDiv.children[0].offsetWidth - bigDiv.offsetWidth);
/*求出大图片在Y轴的移动距离*/
var mY = _pageY * (bigDiv.children[0].offsetHeight - bigDiv.offsetHeight);
bigDiv.children[0].style.left = -mX + 'px';
bigDiv.children[0].style.top = -mY + 'px';
};
//3.
smallDiv.onmouseover = function(ev) {
bigDiv.style.display = 'block';
move.style.display = 'block';
smallDiv.onmousemove(); //兼容IE
};
smallDiv.onmouseout = function() {
bigDiv.style.display = 'none';
move.style.display = 'none';
};
</script>
</body>
</html>
这是一个Javascript实现放大镜效果的工程，求大神讲解一下？
