实现照片放大镜

页面样式

<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title>哈哈</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      width: 350px;
      height: 350px;
      margin: 100px;
      border: 1px solid #ccc;
      position: relative;
    }

    .big {
      width: 400px;
      height: 400px;
      position: absolute;
      top: 0;
      left: 360px;
      border: 1px solid #ccc;
      overflow: hidden;
      display: none;
    }

    .mask {
      width: 175px;
      height: 175px;
      background: rgba(255, 255, 0, 0.4);
      position: absolute;
      top: 0px;
      left: 0px;
      cursor: move;
      display: none;
    }

    .small {
      position: relative;
    }
  </style>
</head>

<body>
  <div class="box" id="box">
    <div class="small">
      <!--小层-->
      <img src="images/small.png" width="350" alt="" />
      <div class="mask"></div>
      <!--遮挡层-->
    </div>
    <!--小图-->
    <div class="big">
      <!--大层-->
      <img src="images/big.jpg" width="800" alt="" />
      <!--大图-->
    </div>
    <!--大图-->
  </div>
  <!--导入外部的js文件-->
  <script src="common.js"></script>

</body>

</html>

脚本文件

/**
 * 获取指定标签对象
 * @param id 标签的id属性值
 * @returns {Element}根据id属性值返回指定标签对象
 */
function my$(id) {
    return document.getElementById(id);
} 

//获取需要的元素
var box = my$("box");
//获取小图的div
var small = box.children[0];
//遮挡层
var mask = small.children[1];
//获取大图的div
var big = box.children[1];
//获取大图
var bigImg = big.children[0];

// 进入小图，显示遮挡层，显示大图
small.onmouseover = function () {
  mask.style.display = 'block'
  big.style.display = 'block'

}
// 移除小图，隐藏遮挡层，隐藏大图
// small.onmouseout = function () {
//   mask.style.display = 'none'
//   big.style.display = 'none'
// }

// 鼠标移动事件
small.onmousemove = function (e) {

  // 确保鼠标在遮挡层中央
  var x = e.clientX - 100 - mask.offsetWidth / 2
  var y = e.clientY - 100 - mask.offsetHeight / 2
  // 限制边距范围
  // x 的最小值
  x = x <= 0 ? 0 : x
  // y 的最小值
  y = y <= 0 ? 0 : y
  // x 的最大值
  x = x >= small.offsetWidth - mask.offsetWidth ? small.offsetWidth - mask.offsetWidth : x
  // y 的最大值
  y = y >= small.offsetHeight - mask.offsetHeight ? small.offsetHeight - mask.offsetHeight : y

  // 遮挡层移动
  mask.style.left = x + 'px'
  mask.style.top = y + 'px'

  // 计算比例
  // 遮挡层的移动距离 / 大图的移动距离 = 遮挡层的最大移动距离 / 大图最大移动距离

  // 大图最大移动距离
  // X
  var bigX = bigImg.offsetWidth - big.offsetWidth
  // Y
  var bigY = bigImg.offsetHeight - big.offsetHeight

  // 大图移动距离
  // X
  var bigMoveX = x * bigX / (small.offsetWidth - mask.offsetWidth)
  // Y
  var bigMoveY = y * bigY / (small.offsetHeight - mask.offsetHeight)

  // 移动大图
  bigImg.style.marginLeft = -bigMoveX + 'px'
  bigImg.style.marginTop = -bigMoveY + 'px'

}

类似与京东进行图片的缩放，一张大图，一张小图

资源文件

small

big