* {

      padding: 0px;

      margin: 0px;

    }

​

    .demo {

      margin-top: 100px;

      margin-left: 100px;

      width: 400px;

      height: 400px;

      border: 2px solid #ccc;

    }

​

    .box {

      width: 400px;

      height: 400px;

      position: relative;

    }

​

    .box img {

      width: 100%;

      height: 100%;

    }

​

    .box span {

      display: none;

      position: absolute;

      left: 0;

      top: 0;

      width: 70%;

      height: 70%;

      background: rgba(245, 132, 3, 0.3);

    }

    .big {

      display: none;

      position: absolute;

      left: 505px;

      top: 100px;

      width: 500px;

      height: 500px;

      border: 2px solid #ccc;

      overflow: hidden;

    }

    .big img {

      position: absolute;

    }

var box = document.querySelector(".box");

var sp = box.querySelector("span");

var big = document.querySelector(".big");

var big_img = big.querySelector("img");

// 鼠标进过，盒子显示

box.addEventListener("mouseover", function () {

  sp.style.display = "block";

  big.style.display = "block";

});

// 鼠标离开， 盒子隐藏

box.addEventListener("mouseout", function () {

  sp.style.display = "none";

  big.style.display = "none";

});

// 移动 遮罩小图

box.addEventListener("mousemove", function (e) {

  // 鼠标在盒子中的位置

  var x = e.pageX - box.offsetLeft;

  var y = e.pageY - box.offsetTop;

  // 将鼠标置于 遮罩的中心位置，其计算结果为遮罩的实际位置

  var sp_x = x - sp.offsetWidth / 2;

  var sp_y = y - sp.offsetHeight / 2;

  // 遮罩最大移动距离, 因为是正方形，所以x y 移动距离 一致

  var sp_max = box.offsetWidth - sp.offsetWidth;

  // 使遮罩始终保持在 盒子中移动

  if (sp_x < 0) {

    sp_x = 0;

  } else if (sp_x > sp_max) {

    sp_x = sp_max;

  }

  if (sp_y < 0) {

    sp_y = 0;

  } else if (sp_y > sp_max) {

    sp_y = sp_max;

  }

  sp.style.left = sp_x + "px";

  sp.style.top = sp_y + "px";

​

  // 大图片的移动距离 = 遮挡层移动距离 * 大图片最大移动距离 / 遮挡层的最大移动距离

  // 大图 最大移动距离

  var big_max = big_img.offsetWidth - big.offsetWidth;

  // 大图移动距离 x y

  var bigx = (sp_x * big_max) / sp_max;

  var bigy = (sp_y * big_max) / sp_max;

  big_img.style.left = -bigx + "px";

  big_img.style.top = -bigy + "px";

});

​