NO.9

• {
  margin: 0;
  padding: 0;
  }
  
  .box1 {
  position: relative;
  float: left;
  margin: 60px 0;
  width: 500px;
  border: 4px solid plum;
  }
  
  .box1 img {
  width: 100%;
  }
  
  .mask {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 120px;
  height: 120px;
  background: rgba(255, 81, 0, 0.5);
  }
  
  .box2 {
  display: none;
  position: relative;
  float: left;
  width: 700px;
  height: 400px;
  margin: 20px;
  border: 4px solid plum;
  overflow: hidden;
  }
  
  .box2 img {
  position: absolute;
  top: 0;
  left: 0;
  }
  
  

<script><br />        var box1 = document.querySelector('.box1'); //小盒子<br />        var box2 = document.querySelector('.box2'); //大盒子<br />        var mask = document.querySelector('.mask'); //遮罩<br />        var imgMax = document.querySelector('.imgmax'); //大图片<br />        //鼠标移入小盒子，显示遮罩和大盒子<br />        box1.onmouseover = function() {<br />            box2.style.display = 'block';<br />            mask.style.display = 'block';
        //遮罩随鼠标移动<br />            window.onmousemove = function(e) {<br />                //获取鼠标在盒子内的位置<br />                var mousex = e.pageX - box1.offsetLeft;<br />                var mousey = e.pageY - box1.offsetTop;<br />                //遮罩移动，且鼠标位于遮罩中间<br />                var maskx = mousex - mask.offsetWidth / 2;<br />                var masky = mousey - mask.offsetHeight / 2;<br />                //遮罩不能超出小盒子，最大移动距离为小盒子宽高-遮罩宽高<br />                maskx = maskx < 0 ? 0 : maskx;<br />                maskx = maskx > box1.clientWidth - mask.clientWidth ? box1.clientWidth - mask.clientWidth : maskx;<br />                masky = masky < 0 ? 0 : masky;<br />                masky = masky > box1.clientHeight - mask.clientHeight ? box1.clientHeight - mask.clientHeight : masky;<br />                mask.style.left = maskx + 'px';<br />                mask.style.top = masky + 'px';
            //大盒子图片移动，按比例移动，遮罩在小盒子内和大图片在大盒子内<br />                var imgx = -maskx * (imgMax.offsetWidth - box2.offsetWidth) / (box1.offsetWidth - mask.offsetWidth);<br />                var imgy = -masky * (imgMax.offsetHeight - box2.offsetHeight) / (box1.offsetHeight - mask.offsetHeight);<br />                imgMax.style.left = imgx + 'px';<br />                imgMax.style.top = imgy + 'px';<br />            };<br />        };<br />        //鼠标移出小盒子，隐藏遮罩和大盒子<br />        box1.onmouseout = function() {<br />            box2.style.display = 'none';<br />            mask.style.display = 'none';<br />        };<br />    </script>