<div class="box" id="box"><!--左侧的盒子--><div class="left_img"><!--图片--><img src="images/small.jpg" class="aaa" alt="小图片"/><!--黄色小盒子--><div class="mask"></div></div><!--右侧的盒子--><div class="right_img"><!--右侧盒子内的大图片--><img src="images/big.jpg" alt="大图片"/></div></div>

注意：此处的css结构，根据自己的书写方式进行描述即可

        *{margin: 0;padding: 0;/* box-sizing: border-box; */}.box{width: 1230px;height: 800px;margin: 100px auto;/* border: 1px solid black; */}.left_img{width: 400px;height: 400px;/* border: 5px solid black; */float: left;position: relative;}.left_img .mask{position: absolute;left: 0;top: 0;width: 200px;height: 200px;background-color: yellow;opacity: 0.5;display: none;cursor: move;}.right_img{position: relative;overflow: hidden;width: 400px;height: 400px;/* border: 5px solid black; */margin-left: 10px;float: left;display: none;}.right_img img{position: absolute;top: 0;left: 0;}

  // var box = document.querySelector('.box');var mask = document.querySelector('.mask');var right_img = document.querySelector('.right_img');var left_img = document.querySelector('.left_img');var rightImg = document.querySelector('.right_img img');//鼠标进入时，黄色盒子和右盒子进行隐藏left_img.addEventListener('mouseenter',function(){mask.style.display = 'block';right_img.style.display = 'block';//给盒子设置鼠标进入事件left_img.onmousemove = function(e){//遮盖的小盒子跟随鼠标的位置进行移动//鼠标的横坐标 = 鼠标距离整个页面左侧的距离 - 当前盒子左侧的距离//鼠标的纵坐标 = 鼠标距离整个页面上方的距离 - 当前盒子上方的距离 //mask.offsetWidth / 2;  ,  mask.offsetHeight / 2;  是为了让鼠标的位置在遮罩盒子的正中央显示var mx = e.clientX - this.offsetLeft - mask.offsetWidth / 2;var my = e.clientY - this.offsetTop - mask.offsetHeight / 2;//将鼠标的位置信息赋值给当前的遮罩盒子// mask.style.left = mx + 'px';// mask.style.top = my + 'px';//限制元素水平方向移动的最小距离 + 元素在水平方向最大的横坐标var min_x = 0;var max_x = left_img.offsetWidth - mask.offsetWidth;var min_y = 0;var max_y = left_img.offsetHeight - mask.offsetHeight;//要用鼠标实时的位置 和 限制的范围比较//水平方向的位置进行比较mx = mx <= min_x ? min_x : mx;mx = mx >= max_x ? max_x : mx;//垂直方向的位置进行比较my = my <= min_y ? min_y : my;my = my >= max_y ? max_y : my;//最后将限制后的位置赋值给遮罩盒子mask.style.left = mx + 'px';mask.style.top = my + 'px';//实现右侧盒子中大图片的移动//左侧遮罩盒子移动的距离：左侧盒子的宽度 = 右侧图片移动的距离 ： 右侧图片的宽度//例如：1 ：1 = 2 ：2//右侧图片的移动距离 = 左侧遮罩盒子移动的距离 * 右侧图片的宽度 / 左侧盒子的宽度；// 例如：2 = 1 * 2 / 1rightImg.style.left = - mx * rightImg.offsetWidth / left_img.offsetWidth + 'px';rightImg.style.top = - my * rightImg.offsetHeight / left_img.offsetHeight + 'px';}});//鼠标离开时，黄色盒子和右盒子进行隐藏left_img.addEventListener('mouseleave',function(){mask.style.display = 'none';right_img.style.display = 'none';});

实现效果：