一句话总结：展示放大效果的图片的移动方向与鼠标移动方向相反，比例关系如下图所示：
参考下面效果
效果展示
<style>
#left{
width: 250px;
height: 300px;
border: 1px solid #FFD47F;
position: relative;
float: left;
}
#left img{
width:100%;
height: 100%;
}
#moveBox{
width: 100px;
height: 100px;
background-color: rgba(255, 255, 255, 0.3);
position: absolute;
left: 0px; /*初始位置*/
top: 0px;
}
#right{
width: 150px;
height: 150px;
border: 1px solid #FFD47F;
overflow: hidden;
position: relative;
}
#right img{
position: absolute;
left: 0px;
top: 0px;
width: 375px;/*求那个透明框框可以展示多少图像，则Img按比例来放大 =>> moveBox.width : left.width = 100 : 250 = 1 : 2.5 =>> right.width * 2.5 = 375*/
height: 450px;/*moveBox.height : left.height = 100:300 = 1:3 =>> right.height * 3 = 450*/
}
</style>
<script>
window.onload = function(){
var moveBox = document.getElementById("moveBox");
var divLeft = document.getElementById("left");
var divRight = document.getElementById("right");
var rightImg = document.getElementById("rightImg");
divLeft.onmousemove = function(ev){
var e = ev||window.event;
/*鼠标在方框中心，且需减去外面的偏移量*/
/*x，y：moveBox(透明框框)的移动范围*/
var x = e.clientX + document.documentElement.scrollLeft - divLeft.offsetLeft - moveBox.offsetWidth/2;
var y = e.clientY + document.documentElement.scrollTop - divLeft.offsetTop - moveBox.offsetHeight/2;
/*移到最左边*/
if(x <= 0){
x = 0;
}
/*移到最右边*/
if(x > (divLeft.offsetWidth - moveBox.offsetWidth)){
x = divLeft.offsetWidth - moveBox.offsetWidth;
}
/*移到最上边*/
if(y <= 0){
y = 0;
}
/*移到最下边*/
if(y > (divLeft.offsetHeight - moveBox.offsetHeight)){
y = divLeft.offsetHeight - moveBox.offsetHeight;
}
moveBox.style.left = x + 'px';
moveBox.style.top = y + 'px';
/*左边透明方框移动，则右图反方向移动*/
rightImg.style.left = x*(-1.5) + 'px';//(rightImg.width 375 - right.width 150) / 一共要移动的距离 即divLeft.offsetWidth-moveBox.offsetWidth 150
rightImg.style.top = y*(-1.5) + 'px';//(rightImg.height 450 - right.height 150) / 一共要移动的距离 即divLeft.offsetHeight-moveBox.offsetHeight 200
}
}
</script>
<body>
<div id="left">
<img src=" " />
<div id="moveBox"></div>
</div>
<div id="right">
<img src=" " id="rightImg" />
</div>
</body>
