效果图：
素材：
大图：
小图：
代码思路：
详见代码注释JS部分
代码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 使用style修改样式 --><style>.mbox {position: relative;width: 300px;height: 300px;background: url(s3.png) no-repeat;background-size: 300px 300px;border: 1px solid black;}.mask {display: none;position: absolute;height: 100px;width: 100px;background-color: orange;opacity: .4;cursor: move;}.xbox {display: none;position: absolute;width: 400px;height: 400px;left: 320px;border: 1px solid black;overflow: hidden;}.ximg {position: absolute;}</style></head><body><div class="mbox"><div class="xbox"><img src="big.jpg" class="ximg"></div><div class="mask"></div></div><script>//mbox指小盒子，xbox指放大后所显示的大盒子，ximg指大盒子中的图片，mask指橙色的遮罩层var mbox = document.querySelector('.mbox');var xbox = document.querySelector('.xbox');var ximg = document.querySelector('.ximg');var mask = document.querySelector('.mask');//给mbox添加鼠标经过事件mbox.addEventListener('mouseover', function () {//当鼠标经过mbox时，mask和xbox显示出来mask.style.display = 'block';xbox.style.display = 'block';//给mbox添加鼠标移动事件mbox.addEventListener('mousemove', move);function move(e) {//计算鼠标在mbox内的坐标。为了让鼠标居于mask中心，再各减去mask的宽高一半var left = e.pageX - mbox.offsetLeft - mask.offsetWidth / 2;var top = e.pageY - mbox.offsetTop - mask.offsetHeight / 2;//计算显示比率，ximg最大移动距离/mask最大移动距离var ratio = (ximg.offsetWidth - xbox.offsetWidth) / (mbox.offsetWidth - mask.offsetWidth);//把left、top限制在mbox的范围中if (left <= 0) {left = 0;} else if (left >= mbox.offsetWidth - mask.offsetWidth) {left = mbox.offsetWidth - mask.offsetWidth;}if (top <= 0) {top = 0;} else if (top >= mbox.offsetHeight - mask.offsetHeight) {top = mbox.offsetHeight - mask.offsetHeight;}mask.style.left = left + 'px';mask.style.top = top + 'px';//mask的移动方向与ximg的移动方向刚刚好相反，试一下把 '-' 去掉即可明白。//且ximg移动距离为mask的ratio倍。ximg.style.left = '-' + left * ratio + 'px';ximg.style.top = '-' + top * ratio + 'px';}})//给mbox添加鼠标离开事件mbox.addEventListener('mouseout', function () {mask.style.display = 'none';xbox.style.display = 'none';})</script></body></html>
