1.鼠标经过small，显示遮盖层和大图；离开时隐藏；
2.鼠标在盒子中移动时，遮盖层和鼠标一起移动；
3.遮盖层移动时，大图移动；
须注意点：
1.处理小图时：
鼠标在遮盖层的中间，所以遮盖层的左上角的坐标应该在鼠标在盒子中的位置，减去一半的遮盖层宽度、高度；
代码为：
鼠标在盒子中的位置
var left = e.clientX+document.body.scrollLeft-small.offsetLeft;
var top = e.clientY+document.body.scrollTop-small.offsetTop;
遮盖层的左上角位置
left = left-divmove.offsetWidth/2;
top = top-divmove.offsetHeight/2;
当遮盖层的左上角超出small的区域的时候，需要设置为固定坐标（0，0）；
代码为：left = left<0? 0 : left;
top = top<0? 0 : top;
当遮盖层的右下角到达small右下角，要超出的时候，需要设置左上角为固定值（遮盖层能移动的最大x坐标，遮盖层能移动的最大Y坐标）。
代码为： left = left>small.offsetWidth-divmove.offsetWidth? small.offsetWidth-divmove.offsetWidth:left;
top = top>small.offsetHeight-divmove.offsetHeight? small.offsetHeight-divmove.offsetHeight:top;
2.在处理大图时，需要计算大图的移动位置，此处有一个公式：
遮盖层移动的距离/遮盖层能移动的最大距离 = 大图移动的距离/大图能移动的最大距离。
所以在得到大图移动的距离时，代码如下：
bigleft = left*(big.children[0].offsetWidth-big.offsetWidth)/(small.offsetWidth-divmove.offsetWidth);
bigtop = top*(big.children[0].offsetHeight-big.offsetHeight)/(small.offsetHeight-divmove.offsetHeight);
在此例中，因为大图的初始定位在左上角，遮盖层右移时，大图应该左移。所以在计算时，大图的移动的数据应该为负值。
当进行到这个过程中，如果样式上面的一个小细节你没有注意到，那么效果也许会和你想象的不一样，遮盖层的这该部分不是大图显示的区域。问题出现在样式定义上（所有盒子均为正方形）：
在定义small的时候有一个比例存在：
遮盖层的宽度 / big(说明大图显示区域的宽度) = 小图宽度/大图宽度。
此处我设置为：遮盖层宽度：50px big：300px
小图宽度：100px 大图宽度：600px
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>放大镜</title>
<style>
*{
margin: 0;
padding:0;
text-align: center;
}
#sell{
text-align: center;
}
#small{
position: relative;
display: inline-block;
width: 100px;
height: 100px;
vertical-align: top;
overflow: hidden;
}
#small img{
width: 100%;
height: 100%;
}
#big{
top:0px;
left:170px;
width: 300px;
height: 300px;
display: inline-block;
display: none;
overflow: hidden;
position: relative;
}
#move {
position: absolute;
width: 50px;
height: 50px;
z-index: 1;
top:0;
left:0;
background-color: rgba(50,50,50,0.5);
background-position: 0 0;
display: none;
}
#big img{
position: absolute;
left:0px;
top:0px;
width: 600px;
height: 600px;
}
</style>
</head>
<body>
<div id="sell">
<div id="small">
<img src="./images/big.jpg" alt="">
<div id="move"></div>
</div>
<div id="big">
<img src="./images/big.jpg" alt="">
</div>
</div>
<script>
var small = document.getElementById("small");
var big = document.getElementById("big");
var divmove = document.getElementById("move");
small.onmouseover=function(e){
e = e||window.event;
console.log(e);
small.onmousemove = function(e){
e = e||window.event;
console.log(e);
// 小图形的处理
divmove.style.display = "block";
big.style.display = "block";
// 鼠标在盒子中的坐标
var left = e.clientX+document.body.scrollLeft-small.offsetLeft;
var top = e.clientY+document.body.scrollTop-small.offsetTop;
left = left-divmove.offsetWidth/2;
top = top-divmove.offsetHeight/2;
// move坐标显示在small中
left = left<0? 0 : left;
top = top<0? 0 : top;
left = left>small.offsetWidth-divmove.offsetWidth? small.offsetWidth-divmove.offsetWidth:left;
top = top>small.offsetHeight-divmove.offsetHeight? small.offsetHeight-divmove.offsetHeight:top;
console.log(left+" "+top);
divmove.style.display = "block";
divmove.style.left = left+"px";
divmove.style.top = top+"px";
// 大图形处理
// move 移动的距离/move最大能移动的距离 = bigimg移动的距离/bigimg最大能移动的距离
bigleft = left*(big.children[0].offsetWidth-big.offsetWidth)/(small.offsetWidth-divmove.offsetWidth);
bigtop = top*(big.children[0].offsetHeight-big.offsetHeight)/(small.offsetHeight-divmove.offsetHeight);
big.children[0].style.left = -bigleft+"px";
big.children[0].style.top= -bigtop+"px";
}
}
small.onmouseout=function(e){
e = e||window.event;
divmove.style.display = "none";
big.style.display = "none";
small.onmousemove = function(e){
}
}
</script>
</body>
</html>3.在鼠标进入或者滑出盒子时会出现闪烁，原因为onmouseover、onmouseout 会触发事件冒泡。处理的办法为换成：onmouseenter onmouseleave。不出现时间冒泡时功能一致，onmouseenter onmouseleave不触发事件冒泡。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>放大镜</title>
<style>
*{
margin: 0;
padding:0;
text-align: center;
}
#sell{
text-align: center;
}
#small{
position: relative;
display: inline-block;
width: 100px;
height: 100px;
vertical-align: top;
overflow: hidden;
}
#small img{
width: 100%;
height: 100%;
}
#big{
top:0px;
left:170px;
width: 300px;
height: 300px;
display: inline-block;
display: none;
overflow: hidden;
position: relative;
}
#move {
position: absolute;
width: 50px;
height: 50px;
z-index: 1;
top:0;
left:0;
background-color: rgba(50,50,50,0.5);
background-position: 0 0;
display: none;
}
#big img{
position: absolute;
left:0px;
top:0px;
width: 600px;
height: 600px;
}
</style>
</head>
<body>
<div id="sell">
<div id="small">
<img src="./images/big.jpg" alt="">
<div id="move"></div>
</div>
<div id="big">
<img src="./images/big.jpg" alt="">
</div>
</div>
<script>
var small = document.getElementById("small");
var big = document.getElementById("big");
var divmove = document.getElementById("move");
small.onmouseenter=function(e){
e = e||window.event;
small.onmousemove = function(e){
e = e||window.event;
// 小图形的处理
divmove.style.display = "block";
big.style.display = "block";
// 鼠标在盒子中的坐标
var left = e.clientX+document.body.scrollLeft-small.offsetLeft;
var top = e.clientY+document.body.scrollTop-small.offsetTop;
left = left-divmove.offsetWidth/2;
top = top-divmove.offsetHeight/2;
// move坐标显示在small中
left = left<0? 0 : left;
top = top<0? 0 : top;
left = left>small.offsetWidth-divmove.offsetWidth? small.offsetWidth-divmove.offsetWidth:left;
top = top>small.offsetHeight-divmove.offsetHeight? small.offsetHeight-divmove.offsetHeight:top;
divmove.style.display = "block";
divmove.style.left = left+"px";
divmove.style.top = top+"px";
// 大图形处理
// move 移动的距离/move最大能移动的距离 = bigimg移动的距离/bigimg最大能移动的距离
bigleft = left*(big.children[0].offsetWidth-big.offsetWidth)/(small.offsetWidth-divmove.offsetWidth);
bigtop = top*(big.children[0].offsetHeight-big.offsetHeight)/(small.offsetHeight-divmove.offsetHeight);
big.children[0].style.left = -bigleft+"px";
big.children[0].style.top= -bigtop+"px";
}
}
small.onmouseleave=function(e){
e = e||window.event;
divmove.style.display = "none";
big.style.display = "none";
small.onmousemove = function(e){
}
}
</script>
</body>
</html>