总体思路：
一、布局：
首先，应有2张图片，一张小，一张大。
然后设置2个div，把大小图片各放进一个div里并隐藏大的div，
小图片所在的div里再设置一个div用来做遮罩层，遮罩层隐藏，布局完成.
注意，大图片所在的div的宽高不能超过大图片的宽高！
二、注册鼠标进入、移动、移出事件
当鼠标进入小图所在的div时，应该显示遮罩层，显示大图所在的div，当鼠标移出的时候应该隐藏。
并且当鼠标进入小图所在的div时，应该让遮罩层跟随鼠标移动，并让鼠标在遮罩层的最中间位置。
三、限制遮罩层的移动范围，让遮罩层出不去！
由于鼠标一直在遮罩层上，因此当鼠标出去的时候，大图所在的div是检测不到鼠标是否出去的， 导致遮罩层也能够出去，所以应限制遮罩层的移动范围。
而遮罩层的最大移动范围是：小div的宽度-遮罩层的宽度
遮罩层的最小移动范围是：0 （遮罩层为absolute，小div为relative）
四、设置比例问题，当小图移动的时候，大图也跟着动，且移动方向相反。
有一个公式： 遮罩层的移动距离/大图的移动距离 = 遮罩层的最大移动距离/大图的最大移动距离 （！important）
我们所需要的就是大图的移动距离。
遮罩层的水平移动距离：x ；
遮罩层的最大移动距离：小div的宽度 - 遮罩层的宽度 ；
大图的最大移动距离 : 大图的宽度 - 大div的宽度 ；
（还需计算竖直方向的移动距离）
得出大图的移动距离后，直接用marginLeft和marginTop去设置大图的移动就行了。
注意值为反方向！
Html代码如下：
<div class="box" id="box">
<div class="small"><!--小层-->
<img src="images/small.png" width="350" alt=""/>
<div class="mask"></div><!--遮挡层-->
</div><!--小图-->
<div class="big"><!--大层-->
<img src="images/big.jpg" width="800" alt=""/><!--大图-->
</div><!--大图-->
</div>Css代码如下：
* {
margin: 0;
padding: 0;
}
.box {
width: 350px;
height: 350px;
margin: 100px;
border: 1px solid #ccc;
position: relative;
}
.big {
width: 400px;
height: 400px;
position: absolute;
top: 0;
left: 360px;
border: 1px solid #ccc;
overflow: hidden;
display: none;
}
.mask {
width: 175px;
height: 175px;
background: rgba(255, 255, 0, 0.4);
position: absolute;
top: 0px;
left: 0px;
cursor: move;
display: none;
}
.small {
position: relative;
}JS代码如下：
<script type="text/javascript">
var oBox = document.getElementById("box");
var oSmall = oBox.children[0];
var oBig = oBox.children[1];
var oMask = oSmall.children[1];
var oBigImg = oBig.children[0];
oBox.onmouseenter = function () {
oBig.style.display = "block";
oMask.style.display = "block";
oSmall.onmousemove = function (e) {
// 让遮罩层在鼠标中间
var oW = oMask.offsetWidth / 2 ;
var oH = oMask.offsetHeight / 2;
// 100是因为有margin值100
var x = e.clientX-100-oW;
var y = e.clientY-100-oH;
// 遮罩层最大的移动距离 就是外层的宽度减去遮罩层的宽度
var maxWidth = oSmall.offsetWidth - oMask.offsetWidth;
var maxHeight = oSmall.offsetHeight - oMask.offsetHeight;
//如果超出了最小宽度就让他等于最小宽度 这是限制遮罩层出不去！
x = x<0?x=0:x;
y = y<0?y=0:y;
// 如果超出了最大宽度就让他等于最大宽度 这是限制遮罩层出不去！
x = x>maxWidth?maxWidth:x;
y = y>maxHeight?maxHeight:y;
//小图的移动距离/大图的移动距离 = 小图的最大移动距离/大图的最大移动距离
//大图的移动距离 = 小图的移动距离*大图的最大移动距离/小图的最大移动距离
//得出大图的最大移动距离/小图的最大移动距离，是一个比例
var bili = (oBigImg.offsetWidth - oBig.offsetWidth) / maxWidth ;
//得出大图的水平移动距离
var bigImgMoveX = x * bili;
//得出大图的垂直移动距离
var bigImgMoveY = y * bili;
//遮罩层的移动距离
oMask.style.left = x + "px";
oMask.style.top = y + "px";
//大图的移动跟遮挡层的移动是相反的
oBigImg.style.marginLeft = -bigImgMoveX + "px";
oBigImg.style.marginTop = -bigImgMoveY + "px";
}
oBox.onmouseleave = function () {
oBig.style.display = "none";
oMask.style.display = "none";
}
}
</script>
